[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcodesandbox":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":37,"examples":52,"showcases":53,"links":364,"dates":398},"\u002Fexamples\u002Fapps\u002Fcodesandbox","detail","apps",true,{"title":9,"description":10,"og_image":11},"CodeSandbox design examples - Nicelydone","Explore CodeSandbox UI design examples. Online Code Editor and IDE for Rapid Web Development","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F74179f96-6c71-4bb1-9418-1303822b63b5.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"CodeSandbox design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":36},"SaaS app examples",[24],{"title":25,"links":26},"Explore CodeSandbox",[27,30,33],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fscreens",{"label":31,"to":32},"user flows","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fflows",{"label":34,"to":35},"marketing pages","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fmarketing",[],{"title":38,"slug":39,"description":40,"logo":41,"url":42,"twitter_username":39,"categories":43},"CodeSandbox","codesandbox","Online Code Editor and IDE for Rapid Web Development","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcodesandbox-70008869.png","https:\u002F\u002Fcodesandbox.io",[44,48],{"id":45,"title":46,"slug":47},48,"Developer Tools","developer-tools",{"id":49,"title":50,"slug":51},7,"Web Development","web-development",[],[54,358,361],{"family":55,"examples":56},"screens",[57,81,96,137,154,176,210,228,250,293,316,339],{"uuid":58,"title":38,"description":59,"canonical_path":29,"image":11,"width":60,"height":61,"image_alt":62,"kind":63,"patterns":64,"component_categories":74,"app":79},"74179f96-6c71-4bb1-9418-1303822b63b5","Sign-in screen where the user authenticates with GitHub, Google, or Apple to access their projects.",3024,1738,"CodeSandbox from CodeSandbox","screen",[65],{"id":66,"label":67,"slug":68,"rank":69,"group":70},4,"Sign In","sign-in",0,{"id":71,"label":72,"slug":73},1,"Access & Account","access-and-account",[75],{"id":76,"title":77,"slug":78},175,"Button","button",{"slug":39,"title":38,"logo":41,"categories":80},[],{"uuid":82,"title":38,"description":83,"canonical_path":29,"image":84,"width":60,"height":61,"image_alt":62,"kind":63,"patterns":85,"component_categories":88,"app":94},"13a4ca69-afe1-4da2-a9ce-8647051136cd","Signin screen where the user authenticates via a primary provider, Google, or Apple to access their workspace.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F13a4ca69-afe1-4da2-a9ce-8647051136cd.png",[86],{"id":66,"label":67,"slug":68,"rank":69,"group":87},{"id":71,"label":72,"slug":73},[89,93],{"id":90,"title":91,"slug":92},277,"Button group","button-group",{"id":76,"title":77,"slug":78},{"slug":39,"title":38,"logo":41,"categories":95},[],{"uuid":97,"title":98,"description":99,"canonical_path":29,"image":100,"width":60,"height":61,"image_alt":101,"kind":63,"patterns":102,"component_categories":118,"app":135},"e031d6f5-8f89-4ba1-a2b9-972afd94be22","Create a new Sandbox - CodeSandbox","Create modal where the user selects a starter framework like React, Vanilla, or Vue to begin a new project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe031d6f5-8f89-4ba1-a2b9-972afd94be22.png","Create a new Sandbox - CodeSandbox from CodeSandbox",[103,110],{"id":49,"label":104,"slug":105,"rank":69,"group":106},"Add & Create","add-and-create",{"id":107,"label":108,"slug":109},2,"Actions","actions",{"id":111,"label":112,"slug":113,"rank":71,"group":114},86,"Templates","templates",{"id":115,"label":116,"slug":117},8,"Pages & Content","pages-and-content",[119,123,127,131],{"id":120,"title":121,"slug":122},174,"Card","card",{"id":124,"title":125,"slug":126},260,"Badge","badge",{"id":128,"title":129,"slug":130},284,"Modal","modal",{"id":132,"title":133,"slug":134},168,"Accordion","accordion",{"slug":39,"title":38,"logo":41,"categories":136},[],{"uuid":138,"title":98,"description":139,"canonical_path":29,"image":140,"width":60,"height":61,"image_alt":101,"kind":63,"patterns":141,"component_categories":149,"app":152},"a82d6675-eb8f-4a91-9967-27c260308042","Creation modal where the user is prompted to sign in to import a repository from GitHub.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa82d6675-eb8f-4a91-9967-27c260308042.png",[142,144],{"id":66,"label":67,"slug":68,"rank":69,"group":143},{"id":71,"label":72,"slug":73},{"id":145,"label":146,"slug":147,"rank":71,"group":148},15,"Import & Export","import-and-export",{"id":107,"label":108,"slug":109},[150,151],{"id":128,"title":129,"slug":130},{"id":76,"title":77,"slug":78},{"slug":39,"title":38,"logo":41,"categories":153},[],{"uuid":155,"title":98,"description":156,"canonical_path":29,"image":157,"width":60,"height":61,"image_alt":101,"kind":63,"patterns":158,"component_categories":168,"app":174},"9d88fca3-2988-4588-ad54-7cf45e82e3cc","Create modal where the user can browse cloud templates like React, Node.js, and Astro, but is prompted to sign in before forking.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9d88fca3-2988-4588-ad54-7cf45e82e3cc.png",[159,161,166],{"id":66,"label":67,"slug":68,"rank":69,"group":160},{"id":71,"label":72,"slug":73},{"id":162,"label":163,"slug":164,"rank":71,"group":165},79,"Browse","browse",{"id":115,"label":116,"slug":117},{"id":111,"label":112,"slug":113,"rank":107,"group":167},{"id":115,"label":116,"slug":117},[169,170,171,172,173],{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":128,"title":129,"slug":130},{"id":76,"title":77,"slug":78},{"id":132,"title":133,"slug":134},{"slug":39,"title":38,"logo":41,"categories":175},[],{"uuid":177,"title":98,"description":178,"canonical_path":29,"image":179,"width":60,"height":61,"image_alt":101,"kind":63,"patterns":180,"component_categories":199,"app":208},"90d60478-ec5e-4f2c-8f8e-6beb0a41c121","Create modal where the user searches for or selects a starting template like React, Node.js, or Vue to initialize a new project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F90d60478-ec5e-4f2c-8f8e-6beb0a41c121.png",[181,183,185,190],{"id":49,"label":104,"slug":105,"rank":69,"group":182},{"id":107,"label":108,"slug":109},{"id":111,"label":112,"slug":113,"rank":71,"group":184},{"id":115,"label":116,"slug":117},{"id":186,"label":187,"slug":188,"rank":107,"group":189},22,"Search","search",{"id":107,"label":108,"slug":109},{"id":191,"label":192,"slug":193,"rank":194,"group":195},53,"Code Editor","code-editor",3,{"id":196,"label":197,"slug":198},5,"Media & Tools","media-and-tools",[200,204,205,206,207],{"id":201,"title":202,"slug":203},226,"Skeleton","skeleton",{"id":120,"title":121,"slug":122},{"id":124,"title":125,"slug":126},{"id":128,"title":129,"slug":130},{"id":132,"title":133,"slug":134},{"slug":39,"title":38,"logo":41,"categories":209},[],{"uuid":211,"title":98,"description":212,"canonical_path":29,"image":213,"width":60,"height":61,"image_alt":101,"kind":63,"patterns":214,"component_categories":221,"app":226},"15558f54-daa2-49cb-a536-cc6eac6f2dbb","Create modal where the user searches and selects a starter template like React or React Native to begin a new project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F15558f54-daa2-49cb-a536-cc6eac6f2dbb.png",[215,217,219],{"id":49,"label":104,"slug":105,"rank":69,"group":216},{"id":107,"label":108,"slug":109},{"id":186,"label":187,"slug":188,"rank":71,"group":218},{"id":107,"label":108,"slug":109},{"id":111,"label":112,"slug":113,"rank":107,"group":220},{"id":115,"label":116,"slug":117},[222,223,224,225],{"id":201,"title":202,"slug":203},{"id":120,"title":121,"slug":122},{"id":128,"title":129,"slug":130},{"id":132,"title":133,"slug":134},{"slug":39,"title":38,"logo":41,"categories":227},[],{"uuid":229,"title":98,"description":230,"canonical_path":29,"image":231,"width":60,"height":61,"image_alt":101,"kind":63,"patterns":232,"component_categories":245,"app":248},"ae74fb0a-c144-4ff1-b8be-98d7435bf9e6","Code editor where the user is searching for a new project template but receives zero results in the creation modal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fae74fb0a-c144-4ff1-b8be-98d7435bf9e6.png",[233,241,243],{"id":234,"label":235,"slug":236,"rank":69,"group":237},115,"Empty State","empty-state",{"id":238,"label":239,"slug":240},12,"States & Feedback","states-and-feedback",{"id":186,"label":187,"slug":188,"rank":71,"group":242},{"id":107,"label":108,"slug":109},{"id":191,"label":192,"slug":193,"rank":107,"group":244},{"id":196,"label":197,"slug":198},[246,247],{"id":201,"title":202,"slug":203},{"id":128,"title":129,"slug":130},{"slug":39,"title":38,"logo":41,"categories":249},[],{"uuid":251,"title":252,"description":253,"canonical_path":29,"image":254,"width":60,"height":61,"image_alt":255,"kind":63,"patterns":256,"component_categories":277,"app":291},"9b625da3-f7bb-4cc1-9a65-a4990539871d","React - CodeSandbox","Code editor where the user writes React code in a browser-based IDE, views a live preview, and manages project files and dependencies.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9b625da3-f7bb-4cc1-9a65-a4990539871d.png","React - CodeSandbox from CodeSandbox",[257,259,264,269],{"id":191,"label":192,"slug":193,"rank":69,"group":258},{"id":196,"label":197,"slug":198},{"id":260,"label":261,"slug":262,"rank":71,"group":263},58,"Media Editor","media-editor",{"id":196,"label":197,"slug":198},{"id":265,"label":266,"slug":267,"rank":107,"group":268},80,"Files","files",{"id":115,"label":116,"slug":117},{"id":270,"label":271,"slug":272,"rank":194,"group":273},69,"Tabs","tabs",{"id":274,"label":275,"slug":276},6,"Navigation & Commands","navigation-and-commands",[278,282,286,288,289,290],{"id":279,"title":280,"slug":281},169,"Avatar","avatar",{"id":283,"title":284,"slug":285},240,"Horizontal navigation","horizontal-navigation",{"id":287,"title":271,"slug":272},233,{"id":124,"title":125,"slug":126},{"id":76,"title":77,"slug":78},{"id":132,"title":133,"slug":134},{"slug":39,"title":38,"logo":41,"categories":292},[],{"uuid":294,"title":252,"description":295,"canonical_path":29,"image":296,"width":60,"height":61,"image_alt":255,"kind":63,"patterns":297,"component_categories":307,"app":314},"1470371d-8329-4ffc-9cb6-f54d4c69c179","Code editor interface with a prominent modal overlay prompting the user to sign in via GitHub, Google, or Apple to continue building projects.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1470371d-8329-4ffc-9cb6-f54d4c69c179.png",[298,300,302],{"id":66,"label":67,"slug":68,"rank":69,"group":299},{"id":71,"label":72,"slug":73},{"id":191,"label":192,"slug":193,"rank":71,"group":301},{"id":196,"label":197,"slug":198},{"id":303,"label":304,"slug":305,"rank":107,"group":306},114,"Confirmation","confirmation",{"id":238,"label":239,"slug":240},[308,309,310,311,312,313],{"id":283,"title":284,"slug":285},{"id":287,"title":271,"slug":272},{"id":124,"title":125,"slug":126},{"id":128,"title":129,"slug":130},{"id":76,"title":77,"slug":78},{"id":132,"title":133,"slug":134},{"slug":39,"title":38,"logo":41,"categories":315},[],{"uuid":317,"title":252,"description":318,"canonical_path":29,"image":319,"width":60,"height":61,"image_alt":255,"kind":63,"patterns":320,"component_categories":330,"app":337},"c50e8858-ef19-439d-8789-65c3199d68c1","Code editor view where the user is prompted to confirm the permanent deletion of a package.json file via a modal dialog.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc50e8858-ef19-439d-8789-65c3199d68c1.png",[321,323,328],{"id":303,"label":304,"slug":305,"rank":69,"group":322},{"id":238,"label":239,"slug":240},{"id":324,"label":325,"slug":326,"rank":71,"group":327},9,"Delete","delete",{"id":107,"label":108,"slug":109},{"id":191,"label":192,"slug":193,"rank":107,"group":329},{"id":196,"label":197,"slug":198},[331,332,333,334,335,336],{"id":279,"title":280,"slug":281},{"id":283,"title":284,"slug":285},{"id":287,"title":271,"slug":272},{"id":124,"title":125,"slug":126},{"id":132,"title":133,"slug":134},{"id":76,"title":77,"slug":78},{"slug":39,"title":38,"logo":41,"categories":338},[],{"uuid":340,"title":252,"description":341,"canonical_path":29,"image":342,"width":60,"height":61,"image_alt":255,"kind":63,"patterns":343,"component_categories":350,"app":356},"8b6f4332-2e32-4815-af3d-26b06f1b9a26","Browser-based code editor where an anonymous user can edit a React template with a file explorer, code view, and live preview pane.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F8b6f4332-2e32-4815-af3d-26b06f1b9a26.png",[344,346,348],{"id":191,"label":192,"slug":193,"rank":69,"group":345},{"id":196,"label":197,"slug":198},{"id":260,"label":261,"slug":262,"rank":71,"group":347},{"id":196,"label":197,"slug":198},{"id":162,"label":163,"slug":164,"rank":107,"group":349},{"id":115,"label":116,"slug":117},[351,352,353,354,355],{"id":90,"title":91,"slug":92},{"id":283,"title":284,"slug":285},{"id":287,"title":271,"slug":272},{"id":132,"title":133,"slug":134},{"id":76,"title":77,"slug":78},{"slug":39,"title":38,"logo":41,"categories":357},[],{"family":359,"examples":360},"flows",[],{"family":362,"examples":363},"pages",[],[365,367,369,371,374,377,380,382,386,390,394],{"label":366,"to":29},"CodeSandbox product screens",{"label":368,"to":35},"CodeSandbox marketing pages",{"label":370,"to":32},"CodeSandbox user flows",{"label":372,"to":373},"CodeSandbox UI components","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fcomponents",{"label":375,"to":376},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":378,"to":379},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":381,"to":18},"All SaaS app examples",{"label":383,"to":384,"description":385},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":387,"to":388,"description":389},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":391,"to":392,"description":393},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":395,"to":396,"description":397},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":399,"updated_at":400},"2022-11-25T18:08:23.000Z","2026-09-13T13:02:39.000Z"]