[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Ftwenty\u002Fcomponents":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":195,"links":196,"dates":212},"\u002Fexamples\u002Fapps\u002Ftwenty\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Twenty UI components examples - Nicelydone","Browse Twenty UI component design examples. Preview individual interface elements and explore related component categories. The #1 Open-Source CRM","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F31c9068e-d4b2-41e1-9c60-e438e0fea369.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 UI components 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,60,73,82,95,107,120,133,146,159,172,182],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"59ce20fc-01d0-464a-9bd8-e51124adda71","Twenty UI component","A modal for authentication settings.",1280,933,"UI component from Twenty","component",[54],{"id":55,"title":56,"slug":57},236,"Toggle\u002FSwitch","toggle-switch",{"slug":30,"title":29,"logo":32,"categories":59},[],{"uuid":61,"title":47,"description":62,"canonical_path":4,"image":63,"width":64,"height":65,"image_alt":51,"kind":52,"categories":66,"app":71},"81182ad7-d2a9-4d9f-b535-7c2ffad70890","The screenshot displays a credit usage tracker with a progress bar and cost information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5e4d18b1-386d-4e24-bc52-db7c606c4c2c.png",1332,561,[67],{"id":68,"title":69,"slug":70},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":72},[],{"uuid":74,"title":47,"description":75,"canonical_path":4,"image":76,"width":49,"height":77,"image_alt":51,"kind":52,"categories":78,"app":80},"37d95acf-fb7d-4848-b40b-3df91ba54746","A settings panel with a toggle.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff65fd485-2da2-496a-bac9-7b17b082a371.png",497,[79],{"id":55,"title":56,"slug":57},{"slug":30,"title":29,"logo":32,"categories":81},[],{"uuid":83,"title":47,"description":84,"canonical_path":4,"image":85,"width":86,"height":87,"image_alt":51,"kind":52,"categories":88,"app":93},"a886428d-c479-4194-9d58-c2c73856506c","The screenshot displays a tab navigation interface for managing roles, with tabs for permissions, assignments, and settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6980b27b-2e3c-4ca6-aef0-9c72065c6dd9.png",1278,442,[89],{"id":90,"title":91,"slug":92},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":94},[],{"uuid":96,"title":47,"description":97,"canonical_path":4,"image":98,"width":49,"height":99,"image_alt":51,"kind":52,"categories":100,"app":105},"7475d0e1-af8c-46a8-9ad4-dce2de5935ab","The image displays a user interface for selecting the appearance theme of an application, with options for light, dark, and system settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1e0315d1-f151-44f7-be8c-e33e3b583ef3.png",515,[101],{"id":102,"title":103,"slug":104},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":106},[],{"uuid":108,"title":47,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":51,"kind":52,"categories":113,"app":118},"c7672da1-7064-4880-90aa-a6ac678f0cb1","A modal showing a password update confirmation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdb7a9f27-5ea5-4de1-b23c-2bbbe852c327.png",673,162,[114],{"id":115,"title":116,"slug":117},247,"Notification Toast","notification-element",{"slug":30,"title":29,"logo":32,"categories":119},[],{"uuid":121,"title":47,"description":122,"canonical_path":4,"image":123,"width":124,"height":125,"image_alt":51,"kind":52,"categories":126,"app":131},"58e22e57-ec1d-4d81-8fd5-6e24967bb7a3","A settings panel with user, workspace, and other sections.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F19a6b02a-d1f0-46c5-b83e-5a99c3185ee5.png",446,1780,[127],{"id":128,"title":129,"slug":130},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":132},[],{"uuid":134,"title":47,"description":135,"canonical_path":4,"image":136,"width":137,"height":138,"image_alt":51,"kind":52,"categories":139,"app":144},"97a039b9-fe7f-4eec-9c0e-3eb8e62dd200","A workflow diagram showing a sequence of actions triggered manually.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2754e947-1fd9-4e18-9b85-af8e7f2e96df.png",732,1292,[140],{"id":141,"title":142,"slug":143},217,"Query builder","query-builder",{"slug":30,"title":29,"logo":32,"categories":145},[],{"uuid":147,"title":47,"description":148,"canonical_path":4,"image":149,"width":150,"height":151,"image_alt":51,"kind":52,"categories":152,"app":157},"459f5815-bd17-48c1-a7eb-7868a771f63d","A modal window showing options for filtering, sorting, and other view settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffedb912c-6c13-47c9-9b8f-c9dff8cee32a.png",502,618,[153],{"id":154,"title":155,"slug":156},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":158},[],{"uuid":160,"title":47,"description":161,"canonical_path":4,"image":162,"width":163,"height":164,"image_alt":51,"kind":52,"categories":165,"app":170},"e6f7c266-ad74-4665-b075-984295ee40ef","A table with filter options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0b6a357-9d3e-4e4d-8b93-41e7794c522b.png",1650,658,[166],{"id":167,"title":168,"slug":169},225,"Sorting & filtering","sorting-filtering",{"slug":30,"title":29,"logo":32,"categories":171},[],{"uuid":173,"title":47,"description":174,"canonical_path":4,"image":175,"width":176,"height":177,"image_alt":51,"kind":52,"categories":178,"app":180},"ead8d182-a129-4d1e-a59a-536773c1a930","The screenshot displays a modal window for filtering and sorting fields, with options to search, show\u002Fhide fields, and apply advanced filters.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9051db98-80c9-4e49-8c80-cfe7eab751ea.png",997,1458,[179],{"id":167,"title":168,"slug":169},{"slug":30,"title":29,"logo":32,"categories":181},[],{"uuid":183,"title":47,"description":184,"canonical_path":4,"image":185,"width":186,"height":187,"image_alt":51,"kind":52,"categories":188,"app":193},"dcead219-5090-4af2-9a4c-b0675868dcc9","A modal for creating a new view with options for view name and type.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4278bc33-49c5-4958-bd6c-9102ceb72d4c.png",599,617,[189],{"id":190,"title":191,"slug":192},250,"Settings panel","settings-panel",{"slug":30,"title":29,"logo":32,"categories":194},[],[],[197,200,203,206,209],{"label":198,"to":199},"Twenty product screens","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fscreens",{"label":201,"to":202},"Twenty marketing pages","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fmarketing",{"label":204,"to":205},"Twenty user flows","\u002Fexamples\u002Fapps\u002Ftwenty\u002Fflows",{"label":207,"to":208},"CRM app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcrm",{"label":210,"to":211},"Open Source app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fopen-source",{"published_at":213,"updated_at":214},"2025-07-07T07:38:29.000Z","2026-09-13T13:02:39.000Z"]