[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftwenty\u002Fscreens":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":44,"showcases":301,"links":302,"dates":329},"\u002Fexamples\u002Fapps\u002Ftwenty\u002Fscreens","detail","screens",true,{"title":9,"description":10,"og_image":11},"Twenty product screens examples - Nicelydone","Browse Twenty screen design examples. Preview the interface screenshots and explore related UI patterns. The #1 Open-Source CRM","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fd0df7467-a48e-4adc-a82f-47d920858428.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},"Twenty design examples","\u002Fexamples\u002Fapps\u002Ftwenty",{"label":23,"to":4},"Twenty product screens examples",{"title":23,"eyebrow":25,"description":10,"sections":26,"body":27},"SaaS app examples",[],[],{"title":29,"slug":30,"description":31,"logo":32,"url":33,"twitter_username":34,"categories":35},"Twenty","twenty","The #1 Open-Source CRM","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F958b58b6-f349-407c-8a71-bb683f68bcd2.png","https:\u002F\u002Ftwenty.com","twentycrm",[36,40],{"id":37,"title":38,"slug":39},53,"CRM","crm",{"id":41,"title":42,"slug":43},45,"Open Source","open-source",[45,86,101,119,136,151,197,213,233,252,272,286],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":53,"component_categories":71,"app":84},"d0df7467-a48e-4adc-a82f-47d920858428","Sign in or Create an account","Authentication modal where the user can sign up or log in using Google, Microsoft, or email, displayed over a dimmed CRM companies data table.",3024,1780,"Sign in or Create an account from Twenty","screen",[54,63],{"id":55,"label":56,"slug":57,"rank":58,"group":59},5,"Sign Up","sign-up",0,{"id":60,"label":61,"slug":62},1,"Access & Account","access-and-account",{"id":64,"label":65,"slug":66,"rank":60,"group":67},77,"Welcome","welcome",{"id":68,"label":69,"slug":70},7,"Onboarding & Education","onboarding-and-education",[72,76,80],{"id":73,"title":74,"slug":75},260,"Badge","badge",{"id":77,"title":78,"slug":79},284,"Modal","modal",{"id":81,"title":82,"slug":83},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":47,"description":88,"canonical_path":4,"image":89,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":90,"component_categories":95,"app":99},"4329fcb6-9de9-4d2d-aacf-2157839261a1","Sign-in screen where the user authenticates with Google, Microsoft, or an email address over a dimmed application background.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4329fcb6-9de9-4d2d-aacf-2157839261a1.png",[91,93],{"id":55,"label":56,"slug":57,"rank":58,"group":92},{"id":60,"label":61,"slug":62},{"id":64,"label":65,"slug":66,"rank":60,"group":94},{"id":68,"label":69,"slug":70},[96,97,98],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":100},[],{"uuid":102,"title":47,"description":103,"canonical_path":4,"image":104,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":105,"component_categories":113,"app":117},"26ea83f7-983d-4c5a-b239-e7bb2763d343","Sign-in screen where the user authenticates with Google, Microsoft, or email via a centered modal over the application.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F26ea83f7-983d-4c5a-b239-e7bb2763d343.png",[106,111],{"id":107,"label":108,"slug":109,"rank":58,"group":110},4,"Sign In","sign-in",{"id":60,"label":61,"slug":62},{"id":64,"label":65,"slug":66,"rank":60,"group":112},{"id":68,"label":69,"slug":70},[114,115,116],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":118},[],{"uuid":120,"title":47,"description":121,"canonical_path":4,"image":122,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":123,"component_categories":130,"app":134},"5e8f5800-3c61-4b8b-b5bb-30c108d4c59c","Signup screen where the user can create an account using Google, Microsoft, or email and password, displayed as a modal over a companies data table.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5e8f5800-3c61-4b8b-b5bb-30c108d4c59c.png",[124,126],{"id":55,"label":56,"slug":57,"rank":58,"group":125},{"id":60,"label":61,"slug":62},{"id":60,"label":127,"slug":128,"rank":60,"group":129},"Account Setup","account-setup",{"id":60,"label":61,"slug":62},[131,132,133],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":135},[],{"uuid":137,"title":47,"description":138,"canonical_path":4,"image":139,"width":49,"height":50,"image_alt":51,"kind":52,"patterns":140,"component_categories":145,"app":149},"b70063c7-c0ff-4e64-9c70-ed28ee419ef0","Signup modal where the user can create an account using Google, Microsoft, or an email and password, overlaid on the main application.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002Fb70063c7-c0ff-4e64-9c70-ed28ee419ef0.png",[141,143],{"id":55,"label":56,"slug":57,"rank":58,"group":142},{"id":60,"label":61,"slug":62},{"id":60,"label":127,"slug":128,"rank":60,"group":144},{"id":60,"label":61,"slug":62},[146,147,148],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":150},[],{"uuid":152,"title":29,"description":153,"canonical_path":4,"image":154,"width":49,"height":50,"image_alt":155,"kind":52,"patterns":156,"component_categories":188,"app":195},"64d7ca1a-4a3b-4a46-bc16-87b371f20932","Paywall modal where the user selects between a 30-day trial with a credit card or a 7-day trial without one to access the Pro Plan.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F64d7ca1a-4a3b-4a46-bc16-87b371f20932.png","Twenty from Twenty",[157,165,170,179],{"id":158,"label":159,"slug":160,"rank":58,"group":161},91,"Trial","trial",{"id":162,"label":163,"slug":164},9,"Plans & Limits","plans-and-limits",{"id":166,"label":167,"slug":168,"rank":60,"group":169},89,"Pricing","pricing",{"id":162,"label":163,"slug":164},{"id":171,"label":172,"slug":173,"rank":174,"group":175},114,"Confirmation","confirmation",2,{"id":176,"label":177,"slug":178},12,"States & Feedback","states-and-feedback",{"id":180,"label":181,"slug":182,"rank":183,"group":184},130,"Checkout","checkout",3,{"id":185,"label":186,"slug":187},14,"Payments & Checkout","payments-and-checkout",[189,193,194],{"id":190,"title":191,"slug":192},174,"Card","card",{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":196},[],{"uuid":198,"title":29,"description":199,"canonical_path":4,"image":200,"width":49,"height":50,"image_alt":155,"kind":52,"patterns":201,"component_categories":208,"app":211},"4d82c72a-f227-4a42-a179-fe53b6f0ba02","Paywall modal where the user must choose between a 30-day trial with a credit card or a 7-day trial without one to access the Pro Plan.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F4d82c72a-f227-4a42-a179-fe53b6f0ba02.png",[202,204,206],{"id":158,"label":159,"slug":160,"rank":58,"group":203},{"id":162,"label":163,"slug":164},{"id":166,"label":167,"slug":168,"rank":60,"group":205},{"id":162,"label":163,"slug":164},{"id":171,"label":172,"slug":173,"rank":174,"group":207},{"id":176,"label":177,"slug":178},[209,210],{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":212},[],{"uuid":214,"title":215,"description":216,"canonical_path":4,"image":217,"width":49,"height":50,"image_alt":218,"kind":52,"patterns":219,"component_categories":229,"app":231},"521bd315-5d99-49bd-8c79-682fa5f2ccdd","Twenty.com","Checkout page where the user activates a 7-day free trial for a Pro Plan by confirming their pre-filled email address.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F521bd315-5d99-49bd-8c79-682fa5f2ccdd.png","Twenty.com from Twenty",[220,222,224],{"id":180,"label":181,"slug":182,"rank":58,"group":221},{"id":185,"label":186,"slug":187},{"id":158,"label":159,"slug":160,"rank":60,"group":223},{"id":162,"label":163,"slug":164},{"id":225,"label":226,"slug":227,"rank":174,"group":228},131,"Payment Form","payment-form",{"id":185,"label":186,"slug":187},[230],{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":232},[],{"uuid":234,"title":235,"description":236,"canonical_path":4,"image":237,"width":49,"height":50,"image_alt":238,"kind":52,"patterns":239,"component_categories":242,"app":250},"5ed24337-5985-4c87-a820-dc263aacaab9","Create Workspace","Onboarding modal where the user sets up their new workspace by uploading a logo and entering an organization name.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5ed24337-5985-4c87-a820-dc263aacaab9.png","Create Workspace from Twenty",[240],{"id":60,"label":127,"slug":128,"rank":58,"group":241},{"id":60,"label":61,"slug":62},[243,247,248,249],{"id":244,"title":245,"slug":246},169,"Avatar","avatar",{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":251},[],{"uuid":253,"title":235,"description":254,"canonical_path":4,"image":255,"width":49,"height":50,"image_alt":238,"kind":52,"patterns":256,"component_categories":266,"app":270},"5db78175-9a96-4dd1-9bff-00bbd72cc52f","Onboarding screen where the user sets up their new workspace by uploading a logo and entering an organization name.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F5db78175-9a96-4dd1-9bff-00bbd72cc52f.png",[257,259],{"id":60,"label":127,"slug":128,"rank":58,"group":258},{"id":60,"label":61,"slug":62},{"id":260,"label":261,"slug":262,"rank":60,"group":263},25,"Upload & Download","upload-and-download",{"id":174,"label":264,"slug":265},"Actions","actions",[267,268,269],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":271},[],{"uuid":273,"title":235,"description":274,"canonical_path":4,"image":275,"width":49,"height":50,"image_alt":238,"kind":52,"patterns":276,"component_categories":281,"app":284},"159a5683-95df-449f-a79d-394af4048687","Onboarding step where the user names their new workspace and uploads an organization logo before continuing.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F159a5683-95df-449f-a79d-394af4048687.png",[277,279],{"id":60,"label":127,"slug":128,"rank":58,"group":278},{"id":60,"label":61,"slug":62},{"id":260,"label":261,"slug":262,"rank":60,"group":280},{"id":174,"label":264,"slug":265},[282,283],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"slug":30,"title":29,"logo":32,"categories":285},[],{"uuid":287,"title":235,"description":288,"canonical_path":4,"image":289,"width":49,"height":50,"image_alt":238,"kind":52,"patterns":290,"component_categories":295,"app":299},"962fcf92-6a80-4752-8daf-12d334ec9f36","Modal where the user sets up a new workspace by uploading a company logo and entering their organization name.","https:\u002F\u002Fassets.nicelydone.club\u002Ff\u002F962fcf92-6a80-4752-8daf-12d334ec9f36.png",[291,293],{"id":60,"label":127,"slug":128,"rank":58,"group":292},{"id":60,"label":61,"slug":62},{"id":260,"label":261,"slug":262,"rank":60,"group":294},{"id":174,"label":264,"slug":265},[296,297,298],{"id":73,"title":74,"slug":75},{"id":77,"title":78,"slug":79},{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":300},[],[],[303,305,307,309,311,313,315,317,319,321,323,326],{"label":127,"to":304},"\u002Fexamples\u002Fscreens\u002Faccount-setup",{"label":56,"to":306},"\u002Fexamples\u002Fscreens\u002Fsign-up",{"label":159,"to":308},"\u002Fexamples\u002Fscreens\u002Ftrial",{"label":261,"to":310},"\u002Fexamples\u002Fscreens\u002Fupload-and-download",{"label":65,"to":312,"count":183},"\u002Fexamples\u002Fscreens\u002Fwelcome",{"label":181,"to":314,"count":174},"\u002Fexamples\u002Fscreens\u002Fcheckout",{"label":172,"to":316,"count":174},"\u002Fexamples\u002Fscreens\u002Fconfirmation",{"label":167,"to":318,"count":174},"\u002Fexamples\u002Fscreens\u002Fpricing",{"label":226,"to":320,"count":60},"\u002Fexamples\u002Fscreens\u002Fpayment-form",{"label":108,"to":322,"count":60},"\u002Fexamples\u002Fscreens\u002Fsign-in",{"label":324,"to":325},"CRM app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcrm",{"label":327,"to":328},"Open Source app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fopen-source",{"published_at":330,"updated_at":331},"2025-07-07T07:38:29.000Z","2026-09-13T13:02:39.000Z"]