[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fgitpod":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":21,"app":34,"examples":45,"showcases":46,"links":334,"dates":366},"\u002Fexamples\u002Fapps\u002Fgitpod","detail","apps",true,{"title":9,"description":10,"og_image":11},"Gitpod design examples - Nicelydone","Explore Gitpod UI design examples. Always ready to code","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fe02baaab-dcc5-4e29-9a94-91792cac4967.png",[13,16,19],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":4},"Gitpod design examples",{"title":20,"eyebrow":22,"description":10,"sections":23,"body":33},"SaaS app examples",[24],{"title":25,"links":26},"Explore Gitpod",[27,30],{"label":28,"to":29},"product screens","\u002Fexamples\u002Fapps\u002Fgitpod\u002Fscreens",{"label":31,"to":32},"marketing pages","\u002Fexamples\u002Fapps\u002Fgitpod\u002Fmarketing",[],{"title":35,"slug":36,"description":37,"logo":38,"url":39,"twitter_username":36,"categories":40},"Gitpod","gitpod","Always ready to code","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fgitpod-9e53b4f6.png","https:\u002F\u002Fwww.gitpod.io",[41],{"id":42,"title":43,"slug":44},48,"Developer Tools","developer-tools",[],[47,331],{"family":48,"examples":49},"screens",[50,75,114,138,157,183,204,220,246,268,291,315],{"uuid":51,"title":52,"description":53,"canonical_path":29,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":58,"component_categories":68,"app":73},"e02baaab-dcc5-4e29-9a94-91792cac4967","Dashboard — Gitpod","Sign-in screen where the user authenticates with GitLab, GitHub, or Bitbucket alongside a grid of product feature highlights.",3024,1738,"Dashboard — Gitpod from Gitpod","screen",[59],{"id":60,"label":61,"slug":62,"rank":63,"group":64},4,"Sign In","sign-in",0,{"id":65,"label":66,"slug":67},1,"Access & Account","access-and-account",[69],{"id":70,"title":71,"slug":72},175,"Button","button",{"slug":36,"title":35,"logo":38,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":29,"image":79,"width":54,"height":55,"image_alt":80,"kind":57,"patterns":81,"component_categories":98,"app":112},"3304a753-60fb-4230-9c5d-81fbb950d3e3","Workspaces — Gitpod","List view where the user configures their workspace environment by selecting a preferred IDE like VS Code or IntelliJ from a modal.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F3304a753-60fb-4230-9c5d-81fbb950d3e3.png","Workspaces — Gitpod from Gitpod",[82,90],{"id":83,"label":84,"slug":85,"rank":63,"group":86},36,"Model Selection","model-selection",{"id":87,"label":88,"slug":89},3,"AI","ai",{"id":91,"label":92,"slug":93,"rank":65,"group":94},102,"Settings","settings",{"id":95,"label":96,"slug":97},10,"Settings & Admin","settings-and-admin",[99,103,107,111],{"id":100,"title":101,"slug":102},284,"Modal","modal",{"id":104,"title":105,"slug":106},174,"Card","card",{"id":108,"title":109,"slug":110},240,"Horizontal navigation","horizontal-navigation",{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":113},[],{"uuid":115,"title":77,"description":116,"canonical_path":29,"image":117,"width":54,"height":55,"image_alt":80,"kind":57,"patterns":118,"component_categories":127,"app":136},"a4645234-8898-4e6d-a59d-edd339470211","List view of workspaces with a modal overlay where the user selects their preferred IDE, such as VS Code or IntelliJ, and can opt into the latest unstable release.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fa4645234-8898-4e6d-a59d-edd339470211.png",[119],{"id":120,"label":121,"slug":122,"rank":63,"group":123},23,"Select","select",{"id":124,"label":125,"slug":126},2,"Actions","actions",[128,129,130,134,135],{"id":100,"title":101,"slug":102},{"id":104,"title":105,"slug":106},{"id":131,"title":132,"slug":133},169,"Avatar","avatar",{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":137},[],{"uuid":139,"title":77,"description":140,"canonical_path":29,"image":141,"width":54,"height":55,"image_alt":80,"kind":57,"patterns":142,"component_categories":151,"app":155},"4bd2c5be-cd57-4d35-9d4f-9f50b892585f","List view where the user is prompted to create their first workspace because none exist yet.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4bd2c5be-cd57-4d35-9d4f-9f50b892585f.png",[143],{"id":144,"label":145,"slug":146,"rank":63,"group":147},115,"Empty State","empty-state",{"id":148,"label":149,"slug":150},12,"States & Feedback","states-and-feedback",[152,153,154],{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":156},[],{"uuid":158,"title":77,"description":159,"canonical_path":29,"image":160,"width":54,"height":55,"image_alt":80,"kind":57,"patterns":161,"component_categories":177,"app":181},"9e161a42-4c9e-4e7a-a43f-0de7581453d7","Dashboard where the user lands to manage their workspaces, currently showing an empty state with a prompt to create a new one.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F9e161a42-4c9e-4e7a-a43f-0de7581453d7.png",[162,164,172],{"id":144,"label":145,"slug":146,"rank":63,"group":163},{"id":148,"label":149,"slug":150},{"id":165,"label":166,"slug":167,"rank":65,"group":168},80,"Files","files",{"id":169,"label":170,"slug":171},8,"Pages & Content","pages-and-content",{"id":173,"label":174,"slug":175,"rank":124,"group":176},7,"Add & Create","add-and-create",{"id":124,"label":125,"slug":126},[178,179,180],{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":182},[],{"uuid":184,"title":185,"description":186,"canonical_path":29,"image":187,"width":54,"height":55,"image_alt":188,"kind":57,"patterns":189,"component_categories":197,"app":202},"c37b87bc-d968-49de-b174-dd3ab306edaf","New Team — Gitpod","Creation screen where the user enters a name to set up a new team for managing multiple projects and group workspaces.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fc37b87bc-d968-49de-b174-dd3ab306edaf.png","New Team — Gitpod from Gitpod",[190,192],{"id":173,"label":174,"slug":175,"rank":63,"group":191},{"id":124,"label":125,"slug":126},{"id":193,"label":194,"slug":195,"rank":65,"group":196},104,"Team Management","team-management",{"id":95,"label":96,"slug":97},[198,199,200,201],{"id":104,"title":105,"slug":106},{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":203},[],{"uuid":205,"title":185,"description":206,"canonical_path":29,"image":207,"width":54,"height":55,"image_alt":188,"kind":57,"patterns":208,"component_categories":213,"app":218},"5989cefe-3ebc-47c2-a0a3-634f7959d8a3","Create page where the user names a new team to manage multiple projects and group workspaces.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5989cefe-3ebc-47c2-a0a3-634f7959d8a3.png",[209,211],{"id":173,"label":174,"slug":175,"rank":63,"group":210},{"id":124,"label":125,"slug":126},{"id":193,"label":194,"slug":195,"rank":65,"group":212},{"id":95,"label":96,"slug":97},[214,215,216,217],{"id":104,"title":105,"slug":106},{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":219},[],{"uuid":221,"title":222,"description":223,"canonical_path":29,"image":224,"width":54,"height":55,"image_alt":225,"kind":57,"patterns":226,"component_categories":236,"app":244},"23f6d58e-cb8a-4b64-a47d-b62ee1c26474","Projects — Gitpod","Projects list view in an empty state, prompting the user to create their first project or invite members to the workspace.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F23f6d58e-cb8a-4b64-a47d-b62ee1c26474.png","Projects — Gitpod from Gitpod",[227,229,234],{"id":144,"label":145,"slug":146,"rank":63,"group":228},{"id":148,"label":149,"slug":150},{"id":230,"label":231,"slug":232,"rank":65,"group":233},133,"Invite Teammates","invite-teammates",{"id":124,"label":125,"slug":126},{"id":193,"label":194,"slug":195,"rank":124,"group":235},{"id":95,"label":96,"slug":97},[237,241,242,243],{"id":238,"title":239,"slug":240},233,"Tabs","tabs",{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":245},[],{"uuid":247,"title":222,"description":248,"canonical_path":29,"image":249,"width":54,"height":55,"image_alt":225,"kind":57,"patterns":250,"component_categories":257,"app":266},"4473fc5c-d4a0-46cf-b067-291e0fa1a846","List view where the user manages recently added projects for their team, currently showing an empty state with prompts to create a project or invite members.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4473fc5c-d4a0-46cf-b067-291e0fa1a846.png",[251,253,255],{"id":144,"label":145,"slug":146,"rank":63,"group":252},{"id":148,"label":149,"slug":150},{"id":193,"label":194,"slug":195,"rank":65,"group":254},{"id":95,"label":96,"slug":97},{"id":230,"label":231,"slug":232,"rank":124,"group":256},{"id":124,"label":125,"slug":126},[258,262,263,264,265],{"id":259,"title":260,"slug":261},226,"Skeleton","skeleton",{"id":238,"title":239,"slug":240},{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":267},[],{"uuid":269,"title":222,"description":270,"canonical_path":29,"image":271,"width":54,"height":55,"image_alt":225,"kind":57,"patterns":272,"component_categories":284,"app":289},"1e5a67ce-a36a-4a84-a548-25d6dc8c2ce4","Creation screen where the user is prompted to configure the Gitpod app for their GitHub account before they can import a repository.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F1e5a67ce-a36a-4a84-a548-25d6dc8c2ce4.png",[273,277,279],{"id":65,"label":274,"slug":275,"rank":63,"group":276},"Account Setup","account-setup",{"id":65,"label":66,"slug":67},{"id":173,"label":174,"slug":175,"rank":65,"group":278},{"id":124,"label":125,"slug":126},{"id":280,"label":281,"slug":282,"rank":124,"group":283},97,"Integrations","integrations",{"id":95,"label":96,"slug":97},[285,286,287,288],{"id":104,"title":105,"slug":106},{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":290},[],{"uuid":292,"title":52,"description":293,"canonical_path":29,"image":294,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":295,"component_categories":310,"app":313},"2b771eba-b25d-4b2d-ad52-d5ec06a13a66","Create page where the user selects a Git repository from their connected GitHub account to start a new project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F2b771eba-b25d-4b2d-ad52-d5ec06a13a66.png",[296,298,300,305],{"id":173,"label":174,"slug":175,"rank":63,"group":297},{"id":124,"label":125,"slug":126},{"id":120,"label":121,"slug":122,"rank":65,"group":299},{"id":124,"label":125,"slug":126},{"id":301,"label":302,"slug":303,"rank":124,"group":304},22,"Search","search",{"id":124,"label":125,"slug":126},{"id":306,"label":307,"slug":308,"rank":87,"group":309},81,"Home","home",{"id":169,"label":170,"slug":171},[311,312],{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"slug":36,"title":35,"logo":38,"categories":314},[],{"uuid":316,"title":52,"description":317,"canonical_path":29,"image":318,"width":54,"height":55,"image_alt":56,"kind":57,"patterns":319,"component_categories":324,"app":329},"ee3261a7-ac57-47fe-9adf-d196d75dd320","Create page where the user selects a GitHub repository to import and configure as a new project.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fee3261a7-ac57-47fe-9adf-d196d75dd320.png",[320,322],{"id":173,"label":174,"slug":175,"rank":63,"group":321},{"id":124,"label":125,"slug":126},{"id":120,"label":121,"slug":122,"rank":65,"group":323},{"id":124,"label":125,"slug":126},[325,326,327,328],{"id":104,"title":105,"slug":106},{"id":131,"title":132,"slug":133},{"id":108,"title":109,"slug":110},{"id":70,"title":71,"slug":72},{"slug":36,"title":35,"logo":38,"categories":330},[],{"family":332,"examples":333},"pages",[],[335,337,339,342,345,348,350,354,358,362],{"label":336,"to":29},"Gitpod product screens",{"label":338,"to":32},"Gitpod marketing pages",{"label":340,"to":341},"Gitpod user flows","\u002Fexamples\u002Fapps\u002Fgitpod\u002Fflows",{"label":343,"to":344},"Gitpod UI components","\u002Fexamples\u002Fapps\u002Fgitpod\u002Fcomponents",{"label":346,"to":347},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":349,"to":18},"All SaaS app examples",{"label":351,"to":352,"description":353},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":355,"to":356,"description":357},"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":359,"to":360,"description":361},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":363,"to":364,"description":365},"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":367,"updated_at":368},"2022-10-10T08:51:21.000Z","2026-09-13T13:02:39.000Z"]