[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fnotion\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":56,"showcases":217,"links":218,"dates":237},"\u002Fexamples\u002Fapps\u002Fnotion\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Notion UI components examples - Nicelydone","Browse Notion UI component design examples. Preview individual interface elements and explore related component categories. A unified workspace for modern teams","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feccdb3a0-1312-4ee3-af57-68f2ddc7d173.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},"Notion design examples","\u002Fexamples\u002Fapps\u002Fnotion",{"label":23,"to":4},"Notion 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},"Notion","notion","A unified workspace for modern teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fnotion-67e349e9.png","http:\u002F\u002Fnotion.so","NotionHQ",[36,40,44,48,52],{"id":37,"title":38,"slug":39},29,"Task Management","task-management",{"id":41,"title":42,"slug":43},30,"Productivity","productivity",{"id":45,"title":46,"slug":47},22,"Knowledge Management","knowledge-management",{"id":49,"title":50,"slug":51},23,"Collaboration","collaboration",{"id":53,"title":54,"slug":55},80,"Artificial Intelligence","artificial-intelligence",[57,72,83,94,108,117,132,144,159,174,189,202],{"uuid":58,"title":59,"description":60,"canonical_path":4,"image":11,"width":61,"height":62,"image_alt":63,"kind":64,"categories":65,"app":70},"fc06ba54-9227-4264-94d1-a4c3cd9f88f7","Community Bento Grid","A bento grid layout showcasing community statistics, features, and testimonials. It includes a header with a call to action, a row of illustrated avatars, KPI tiles for community metrics, feature cards highlighting support and languages, a large image carousel showing a community event, and a column of user testimonials.",2304,3780,"Community Bento Grid from Notion","component",[66],{"id":67,"title":68,"slug":69},298,"Bento box","bento-grid",{"slug":30,"title":29,"logo":32,"categories":71},[],{"uuid":73,"title":74,"description":75,"canonical_path":4,"image":76,"width":61,"height":77,"image_alt":78,"kind":64,"categories":79,"app":81},"d8fc6e37-dc3d-47cc-8623-ae110fc1b5e5","Template Bento Grid","A bento grid layout showcasing different use cases and templates. It features a large featured card on the left with a preview image and smaller cards on the right for various templates like Product roadmap, OKRs, Meeting notes, etc. Each card includes an icon, title, and a 'Get template' link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdb1e7168-d441-4ff8-8779-dc9a5a0f65a2.png",1559,"Template Bento Grid from Notion",[80],{"id":67,"title":68,"slug":69},{"slug":30,"title":29,"logo":32,"categories":82},[],{"uuid":84,"title":85,"description":86,"canonical_path":4,"image":87,"width":61,"height":88,"image_alt":89,"kind":64,"categories":90,"app":92},"bbf45ecc-80b6-4b2a-a952-9b96a2dac992","Feature bento grid","A bento grid layout showcasing product features with illustrations, headings, descriptions, and mock UI screenshots.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa76b78ce-7cef-4d9e-aed3-615dd334bcbc.png",3349,"Feature bento grid from Notion",[91],{"id":67,"title":68,"slug":69},{"slug":30,"title":29,"logo":32,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":64,"categories":102,"app":106},"718d2fdd-661f-4c5d-bd03-c5542bd59877","Progress indicator","A horizontal progress bar showing 50% completion with a numeric label.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa5e3537b-dc47-44b0-af18-d5f1f2adeb12.png",332,150,"Progress indicator from Notion",[103],{"id":104,"title":96,"slug":105},213,"progress-indicator",{"slug":30,"title":29,"logo":32,"categories":107},[],{"uuid":109,"title":96,"description":110,"canonical_path":4,"image":111,"width":112,"height":100,"image_alt":101,"kind":64,"categories":113,"app":115},"9e43ed3c-b5e0-44ec-be37-db5ac3f32d1c","A simple progress bar showing 0% completion with a numeric label alongside a light gray track.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F62859a96-3e5a-4110-85ca-efa8c1352613.png",316,[114],{"id":104,"title":96,"slug":105},{"slug":30,"title":29,"logo":32,"categories":116},[],{"uuid":118,"title":119,"description":120,"canonical_path":4,"image":121,"width":122,"height":123,"image_alt":124,"kind":64,"categories":125,"app":130},"60424043-14ed-4009-b100-e5a8ec62adb4","Filter menu","A filter bar with an open dropdown menu for adding a new filter rule. The menu includes a search input and a list of filterable properties.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe012ef40-2f76-47b0-b511-67ce357d521f.png",1764,910,"Filter menu from Notion",[126],{"id":127,"title":128,"slug":129},225,"Sorting & filtering","sorting-filtering",{"slug":30,"title":29,"logo":32,"categories":131},[],{"uuid":133,"title":134,"description":135,"canonical_path":4,"image":136,"width":137,"height":138,"image_alt":139,"kind":64,"categories":140,"app":142},"d1023cbe-043c-4ef6-96bc-e8f4665ff06f","Filter bar","A horizontal row of filter dropdowns and an add filter button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcde66f76-6e90-4f91-830f-f5f08605675d.png",1456,306,"Filter bar from Notion",[141],{"id":127,"title":128,"slug":129},{"slug":30,"title":29,"logo":32,"categories":143},[],{"uuid":145,"title":146,"description":147,"canonical_path":4,"image":148,"width":149,"height":150,"image_alt":151,"kind":64,"categories":152,"app":157},"4b699cb3-1eac-4d96-9d20-214e53ecd50a","Notion UI component","A group card with a join button","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7b10f486-2734-421a-ade7-065f38a89adf.png",734,354,"UI component from Notion",[153],{"id":154,"title":155,"slug":156},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":158},[],{"uuid":160,"title":161,"description":162,"canonical_path":4,"image":163,"width":164,"height":165,"image_alt":166,"kind":64,"categories":167,"app":172},"357dd57a-8717-4ec7-877b-f5e60f04e0e0","Export loading state","A loading state indicating the progress of an export, featuring a circular spinner and text confirming the number of pages exported and an upcoming email notification.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F89fe0a02-a4d5-433d-b371-66cf9a5adcba.png",731,349,"Export loading state from Notion",[168],{"id":169,"title":170,"slug":171},226,"Skeleton","skeleton",{"slug":30,"title":29,"logo":32,"categories":173},[],{"uuid":175,"title":176,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":181,"kind":64,"categories":182,"app":187},"f2f64a5b-e6c4-402f-98e1-712fc0e78782","Text color and background menu","A dropdown menu displaying options for text color and background color, organized into sections with a 'Last Used' shortcut at the top.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5fa772a2-21cc-4223-b2ea-989830e77814.png",616,1317,"Text color and background menu from Notion",[183],{"id":184,"title":185,"slug":186},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":188},[],{"uuid":190,"title":146,"description":191,"canonical_path":4,"image":192,"width":193,"height":194,"image_alt":151,"kind":64,"categories":195,"app":200},"504fae18-4b0c-4626-a566-8e1af0dc9813","A message input field with a user mention and action icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2a3cf683-9131-4239-9b44-0b3ea92a5b62.png",695,353,[196],{"id":197,"title":198,"slug":199},259,"Textarea","input-textarea",{"slug":30,"title":29,"logo":32,"categories":201},[],{"uuid":203,"title":204,"description":205,"canonical_path":4,"image":206,"width":207,"height":208,"image_alt":209,"kind":64,"categories":210,"app":215},"4ff35950-2fed-4650-ab4b-5e96a99c598b","Formatting Toolbar with Block Type Menu","A floating formatting toolbar positioned above selected text in a document editor. The 'Turn into' dropdown menu is open, displaying a list of block types like Text, Heading, List, and Code.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5297c5e4-2762-44a7-8549-2d4da1eeae59.png",1791,1605,"Formatting Toolbar with Block Type Menu from Notion",[211],{"id":212,"title":213,"slug":214},246,"Toolbox","toolbox",{"slug":30,"title":29,"logo":32,"categories":216},[],[],[219,222,225,228,231,234],{"label":220,"to":221},"Notion product screens","\u002Fexamples\u002Fapps\u002Fnotion\u002Fscreens",{"label":223,"to":224},"Notion marketing pages","\u002Fexamples\u002Fapps\u002Fnotion\u002Fmarketing",{"label":226,"to":227},"Notion user flows","\u002Fexamples\u002Fapps\u002Fnotion\u002Fflows",{"label":229,"to":230},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":232,"to":233},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"label":235,"to":236},"Knowledge Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fknowledge-management",{"published_at":238,"updated_at":239},"2016-08-16T08:20:47.000Z","2026-09-13T13:02:39.000Z"]