[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":44,"showcases":376,"links":377,"dates":435},"\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"CodeSandbox product screens examples - Nicelydone","Browse CodeSandbox screen design examples. Preview the interface screenshots and explore related UI patterns. Online Code Editor and IDE for Rapid Web…","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F74179f96-6c71-4bb1-9418-1303822b63b5.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"CodeSandbox design examples","\u002Fexamples\u002Fapps\u002Fcodesandbox",{"label":23,"to":4},"CodeSandbox product screens examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse CodeSandbox screen design examples. Preview the interface screenshots and explore related UI patterns. Online Code Editor and IDE for Rapid Web Development",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"CodeSandbox","codesandbox","Online Code Editor and IDE for Rapid Web Development","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcodesandbox-70008869.png","https:\u002F\u002Fcodesandbox.io",[36,40],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",{"id":41,"title":42,"slug":43},7,"Web Development","web-development",[45,69,110,127,149,183,205,248,271,294,319,342],{"uuid":46,"title":30,"description":47,"canonical_path":4,"image":11,"width":48,"height":49,"image_alt":50,"kind":51,"patterns":52,"component_categories":62,"app":67},"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",[53],{"id":54,"label":55,"slug":56,"rank":57,"group":58},4,"Sign In","sign-in",0,{"id":59,"label":60,"slug":61},1,"Access & Account","access-and-account",[63],{"id":64,"title":65,"slug":66},175,"Button","button",{"slug":31,"title":30,"logo":33,"categories":68},[],{"uuid":70,"title":71,"description":72,"canonical_path":4,"image":73,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":75,"component_categories":91,"app":108},"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",[76,83],{"id":41,"label":77,"slug":78,"rank":57,"group":79},"Add & Create","add-and-create",{"id":80,"label":81,"slug":82},2,"Actions","actions",{"id":84,"label":85,"slug":86,"rank":59,"group":87},86,"Templates","templates",{"id":88,"label":89,"slug":90},8,"Pages & Content","pages-and-content",[92,96,100,104],{"id":93,"title":94,"slug":95},284,"Modal","modal",{"id":97,"title":98,"slug":99},174,"Card","card",{"id":101,"title":102,"slug":103},168,"Accordion","accordion",{"id":105,"title":106,"slug":107},260,"Badge","badge",{"slug":31,"title":30,"logo":33,"categories":109},[],{"uuid":111,"title":71,"description":112,"canonical_path":4,"image":113,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":114,"component_categories":122,"app":125},"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",[115,117],{"id":54,"label":55,"slug":56,"rank":57,"group":116},{"id":59,"label":60,"slug":61},{"id":118,"label":119,"slug":120,"rank":59,"group":121},15,"Import & Export","import-and-export",{"id":80,"label":81,"slug":82},[123,124],{"id":93,"title":94,"slug":95},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":126},[],{"uuid":128,"title":71,"description":129,"canonical_path":4,"image":130,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":131,"component_categories":141,"app":147},"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",[132,134,139],{"id":54,"label":55,"slug":56,"rank":57,"group":133},{"id":59,"label":60,"slug":61},{"id":135,"label":136,"slug":137,"rank":59,"group":138},79,"Browse","browse",{"id":88,"label":89,"slug":90},{"id":84,"label":85,"slug":86,"rank":80,"group":140},{"id":88,"label":89,"slug":90},[142,143,144,145,146],{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"id":101,"title":102,"slug":103},{"id":105,"title":106,"slug":107},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":148},[],{"uuid":150,"title":71,"description":151,"canonical_path":4,"image":152,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":153,"component_categories":172,"app":181},"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",[154,156,158,163],{"id":41,"label":77,"slug":78,"rank":57,"group":155},{"id":80,"label":81,"slug":82},{"id":84,"label":85,"slug":86,"rank":59,"group":157},{"id":88,"label":89,"slug":90},{"id":159,"label":160,"slug":161,"rank":80,"group":162},22,"Search","search",{"id":80,"label":81,"slug":82},{"id":164,"label":165,"slug":166,"rank":167,"group":168},53,"Code Editor","code-editor",3,{"id":169,"label":170,"slug":171},5,"Media & Tools","media-and-tools",[173,177,178,179,180],{"id":174,"title":175,"slug":176},226,"Skeleton","skeleton",{"id":93,"title":94,"slug":95},{"id":97,"title":98,"slug":99},{"id":101,"title":102,"slug":103},{"id":105,"title":106,"slug":107},{"slug":31,"title":30,"logo":33,"categories":182},[],{"uuid":184,"title":71,"description":185,"canonical_path":4,"image":186,"width":48,"height":49,"image_alt":74,"kind":51,"patterns":187,"component_categories":200,"app":203},"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",[188,196,198],{"id":189,"label":190,"slug":191,"rank":57,"group":192},115,"Empty State","empty-state",{"id":193,"label":194,"slug":195},12,"States & Feedback","states-and-feedback",{"id":159,"label":160,"slug":161,"rank":59,"group":197},{"id":80,"label":81,"slug":82},{"id":164,"label":165,"slug":166,"rank":80,"group":199},{"id":169,"label":170,"slug":171},[201,202],{"id":174,"title":175,"slug":176},{"id":93,"title":94,"slug":95},{"slug":31,"title":30,"logo":33,"categories":204},[],{"uuid":206,"title":207,"description":208,"canonical_path":4,"image":209,"width":48,"height":49,"image_alt":210,"kind":51,"patterns":211,"component_categories":232,"app":246},"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",[212,214,219,224],{"id":164,"label":165,"slug":166,"rank":57,"group":213},{"id":169,"label":170,"slug":171},{"id":215,"label":216,"slug":217,"rank":59,"group":218},58,"Media Editor","media-editor",{"id":169,"label":170,"slug":171},{"id":220,"label":221,"slug":222,"rank":80,"group":223},80,"Files","files",{"id":88,"label":89,"slug":90},{"id":225,"label":226,"slug":227,"rank":167,"group":228},69,"Tabs","tabs",{"id":229,"label":230,"slug":231},6,"Navigation & Commands","navigation-and-commands",[233,237,238,240,241,245],{"id":234,"title":235,"slug":236},169,"Avatar","avatar",{"id":101,"title":102,"slug":103},{"id":239,"title":226,"slug":227},233,{"id":105,"title":106,"slug":107},{"id":242,"title":243,"slug":244},240,"Horizontal navigation","horizontal-navigation",{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":247},[],{"uuid":249,"title":207,"description":250,"canonical_path":4,"image":251,"width":48,"height":49,"image_alt":210,"kind":51,"patterns":252,"component_categories":262,"app":269},"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",[253,255,257],{"id":54,"label":55,"slug":56,"rank":57,"group":254},{"id":59,"label":60,"slug":61},{"id":164,"label":165,"slug":166,"rank":59,"group":256},{"id":169,"label":170,"slug":171},{"id":258,"label":259,"slug":260,"rank":80,"group":261},114,"Confirmation","confirmation",{"id":193,"label":194,"slug":195},[263,264,265,266,267,268],{"id":93,"title":94,"slug":95},{"id":101,"title":102,"slug":103},{"id":239,"title":226,"slug":227},{"id":105,"title":106,"slug":107},{"id":242,"title":243,"slug":244},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":270},[],{"uuid":272,"title":207,"description":273,"canonical_path":4,"image":274,"width":48,"height":49,"image_alt":210,"kind":51,"patterns":275,"component_categories":285,"app":292},"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",[276,278,283],{"id":258,"label":259,"slug":260,"rank":57,"group":277},{"id":193,"label":194,"slug":195},{"id":279,"label":280,"slug":281,"rank":59,"group":282},9,"Delete","delete",{"id":80,"label":81,"slug":82},{"id":164,"label":165,"slug":166,"rank":80,"group":284},{"id":169,"label":170,"slug":171},[286,287,288,289,290,291],{"id":234,"title":235,"slug":236},{"id":101,"title":102,"slug":103},{"id":239,"title":226,"slug":227},{"id":105,"title":106,"slug":107},{"id":242,"title":243,"slug":244},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":293},[],{"uuid":295,"title":296,"description":297,"canonical_path":4,"image":298,"width":48,"height":49,"image_alt":299,"kind":51,"patterns":300,"component_categories":312,"app":317},"c5c5db92-dc5b-49b3-8f05-127c06e1e7fd","frosty-diffie-qtknm8 - CodeSandbox","Code editor interface where an anonymous user can edit React code files, manage dependencies, and view external resources.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc5c5db92-dc5b-49b3-8f05-127c06e1e7fd.png","frosty-diffie-qtknm8 - CodeSandbox from CodeSandbox",[301,303,305,307],{"id":164,"label":165,"slug":166,"rank":57,"group":302},{"id":169,"label":170,"slug":171},{"id":220,"label":221,"slug":222,"rank":59,"group":304},{"id":88,"label":89,"slug":90},{"id":54,"label":55,"slug":56,"rank":80,"group":306},{"id":59,"label":60,"slug":61},{"id":308,"label":309,"slug":310,"rank":167,"group":311},11,"Edit","edit",{"id":80,"label":81,"slug":82},[313,314,315,316],{"id":101,"title":102,"slug":103},{"id":239,"title":226,"slug":227},{"id":242,"title":243,"slug":244},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":318},[],{"uuid":320,"title":296,"description":321,"canonical_path":4,"image":322,"width":48,"height":49,"image_alt":299,"kind":51,"patterns":323,"component_categories":330,"app":340},"717c4b7f-940b-4b02-a13c-a81733f18105","Code editor interface where an anonymous user can write React code, manage dependencies, and view a live browser preview.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F717c4b7f-940b-4b02-a13c-a81733f18105.png",[324,326],{"id":164,"label":165,"slug":166,"rank":57,"group":325},{"id":169,"label":170,"slug":171},{"id":169,"label":327,"slug":328,"rank":59,"group":329},"Sign Up","sign-up",{"id":59,"label":60,"slug":61},[331,335,336,337,338,339],{"id":332,"title":333,"slug":334},257,"Input number","input-number",{"id":101,"title":102,"slug":103},{"id":239,"title":226,"slug":227},{"id":105,"title":106,"slug":107},{"id":242,"title":243,"slug":244},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":341},[],{"uuid":343,"title":296,"description":344,"canonical_path":4,"image":345,"width":48,"height":49,"image_alt":299,"kind":51,"patterns":346,"component_categories":360,"app":374},"baa23f2c-2bdc-4973-b9c2-04f3e56ddf9d","Web-based code editor where an anonymous user is viewing a React project with a live mobile preview and has opened a popover prompting them to upgrade to Pro to change privacy settings.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fbaa23f2c-2bdc-4973-b9c2-04f3e56ddf9d.png",[347,349,351,358],{"id":164,"label":165,"slug":166,"rank":57,"group":348},{"id":169,"label":170,"slug":171},{"id":215,"label":216,"slug":217,"rank":59,"group":350},{"id":169,"label":170,"slug":171},{"id":352,"label":353,"slug":354,"rank":80,"group":355},92,"Upgrade Prompt","upgrade-prompt",{"id":279,"label":356,"slug":357},"Plans & Limits","plans-and-limits",{"id":225,"label":226,"slug":227,"rank":167,"group":359},{"id":229,"label":230,"slug":231},[361,365,366,370,371,372,373],{"id":362,"title":363,"slug":364},214,"Popover","popover",{"id":332,"title":333,"slug":334},{"id":367,"title":368,"slug":369},177,"Breadcrumb","breadcrumb",{"id":101,"title":102,"slug":103},{"id":239,"title":226,"slug":227},{"id":242,"title":243,"slug":244},{"id":64,"title":65,"slug":66},{"slug":31,"title":30,"logo":33,"categories":375},[],[],[378,380,382,384,386,388,390,392,394,396,398,400,402,405,408,411,414,417,419,423,427,431],{"label":165,"to":379},"\u002Fexamples\u002Fscreens\u002Fcode-editor",{"label":55,"to":381},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":85,"to":383},"\u002Fexamples\u002Fscreens\u002Ftemplates",{"label":77,"to":385},"\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":259,"to":387},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":221,"to":389},"\u002Fexamples\u002Fscreens\u002Ffiles",{"label":216,"to":391},"\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":160,"to":393},"\u002Fexamples\u002Fscreens\u002Fsearch",{"label":226,"to":395},"\u002Fexamples\u002Fscreens\u002Ftabs",{"label":136,"to":397},"\u002Fexamples\u002Fscreens\u002Fbrowse",{"label":280,"to":399},"\u002Fexamples\u002Fscreens\u002Fdelete",{"label":309,"to":401},"\u002Fexamples\u002Fscreens\u002Fedit",{"label":403,"to":404},"CodeSandbox marketing pages","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fmarketing",{"label":406,"to":407},"CodeSandbox user flows","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fflows",{"label":409,"to":410},"CodeSandbox UI components","\u002Fexamples\u002Fapps\u002Fcodesandbox\u002Fcomponents",{"label":412,"to":413},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":415,"to":416},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"label":418,"to":18},"All SaaS app examples",{"label":420,"to":421,"description":422},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":424,"to":425,"description":426},"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":428,"to":429,"description":430},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":432,"to":433,"description":434},"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":436,"updated_at":437},"2022-11-25T18:08:23.000Z","2026-09-13T13:02:39.000Z"]