[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fside-sheet-drawer":3},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":10,"seo":14,"breadcrumbs":18,"content":27,"examples":36,"showcases":245,"links":246,"dates":283},"\u002Fexamples\u002Fcomponents\u002Fside-sheet-drawer","collection","components",true,{"example_count":9,"app_count":9},8,{"id":11,"title":12,"description":13},220,"Drawer","Explore how interfaces open details or controls beside the main workspace. Look at how drawer width, headings, and actions keep the secondary task connected to its context.",{"title":15,"description":16,"og_image":17},"Drawer UI examples - Nicelydone","Drawer UI design examples from SaaS apps. Explore how interfaces open details or controls beside the main workspace. Look at how drawer width, headings, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2e2e48ae-d7ba-46a6-9c2a-1991c7d97748.png",[19,22,25],{"label":20,"to":21},"Examples","\u002Fexamples",{"label":23,"to":24},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":26,"to":4},"Drawer UI examples",{"title":26,"eyebrow":28,"description":29,"sections":30,"body":34},"UI component category","Drawer UI design examples from SaaS apps. Explore how interfaces open details or controls beside the main workspace. Look at how drawer width, headings, and actions keep the secondary task connected…",[31],{"title":32,"description":13,"links":33},"About Drawer",[],[35],"8 UI components",[37,66,95,121,147,176,201,223],{"uuid":38,"title":39,"description":40,"canonical_path":41,"image":17,"width":42,"height":43,"image_alt":44,"kind":45,"categories":46,"app":49},"38c664c2-4640-4c38-a8e7-0185ea897acf","Rayon UI component","A layer panel for a 3D modeling application.","\u002Fexamples\u002Fapps\u002Frayon\u002Fcomponents",608,1777,"UI component from Rayon","component",[47],{"id":11,"title":12,"slug":48},"side-sheet-drawer",{"slug":50,"title":51,"logo":52,"baseline":53,"categories":54},"rayon","Rayon","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frayon-633e8478.png","The fastest tool to create perfect architectural drawings",[55,59,62],{"id":56,"title":57,"slug":58},73,"Architecture","architecture",{"id":9,"title":60,"slug":61},"Design","design",{"id":63,"title":64,"slug":65},23,"Collaboration","collaboration",{"uuid":67,"title":68,"description":69,"canonical_path":70,"image":71,"width":72,"height":73,"image_alt":74,"kind":45,"categories":75,"app":77},"a9914690-a001-4010-9a84-d1aaaecadf3f","Add Customer Drawer","A drawer component containing a form to add a new customer, including billing and shipping details.","\u002Fexamples\u002Fapps\u002Fstripe\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8788386c-9760-4697-82a0-7bad49d8e294.png",1166,1722,"Add Customer Drawer from Stripe",[76],{"id":11,"title":12,"slug":48},{"slug":78,"title":79,"logo":80,"baseline":81,"categories":82},"stripe","Stripe","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fstripe-ac594414.png","Payments infrastructure for the internet",[83,87,91],{"id":84,"title":85,"slug":86},36,"Finance","finance",{"id":88,"title":89,"slug":90},37,"Developer APIs","developer-apis",{"id":92,"title":93,"slug":94},39,"Payments","payments",{"uuid":96,"title":97,"description":98,"canonical_path":99,"image":100,"width":101,"height":102,"image_alt":103,"kind":45,"categories":104,"app":106},"c75671e8-0567-4050-a570-aebe44cc7376","Photoroom UI component","Image editing modal","\u002Fexamples\u002Fapps\u002Fphotoroom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe6c4c17d-c693-4055-806d-9491e9e40ef1.png",722,1591,"UI component from Photoroom",[105],{"id":11,"title":12,"slug":48},{"slug":107,"title":108,"logo":109,"baseline":110,"categories":111},"photoroom","Photoroom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fphotoroom-0ae20398.png","Magic photo studio on the go",[112,116,117],{"id":113,"title":114,"slug":115},31,"Photography","photography",{"id":9,"title":60,"slug":61},{"id":118,"title":119,"slug":120},80,"Artificial Intelligence","artificial-intelligence",{"uuid":122,"title":123,"description":124,"canonical_path":125,"image":126,"width":127,"height":128,"image_alt":129,"kind":45,"categories":130,"app":132},"edd24746-523f-4428-a38c-7ed3ce8c19da","Supernotes UI component","A welcome message modal with instructions on how to use the app.","\u002Fexamples\u002Fapps\u002Fsupernotes\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7b8190b1-421f-4e53-a14f-94cf03d09616.png",854,1843,"UI component from Supernotes",[131],{"id":11,"title":12,"slug":48},{"slug":133,"title":134,"logo":135,"baseline":136,"categories":137},"supernotes","Supernotes","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsupernotes-3f910943.png","The best collaborative note-taking app",[138,142,146],{"id":139,"title":140,"slug":141},59,"Writing tools","writing-tools",{"id":143,"title":144,"slug":145},22,"Knowledge Management","knowledge-management",{"id":63,"title":64,"slug":65},{"uuid":148,"title":149,"description":150,"canonical_path":151,"image":152,"width":153,"height":154,"image_alt":155,"kind":45,"categories":156,"app":158},"0d7e8358-2365-4cea-a307-69c7bf17ce9e","Dynaboard UI component","A settings modal for a page.","\u002Fexamples\u002Fapps\u002Fdynaboard\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbda7b947-fba6-439e-9540-11f2141836b2.png",735,1735,"UI component from Dynaboard",[157],{"id":11,"title":12,"slug":48},{"slug":159,"title":160,"logo":161,"baseline":162,"categories":163},"dynaboard","Dynaboard","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdinaboard-51ea0211.png","Build a web app in 60 seconds",[164,168,172],{"id":165,"title":166,"slug":167},96,"No code","no-code",{"id":169,"title":170,"slug":171},7,"Web Development","web-development",{"id":173,"title":174,"slug":175},48,"Developer Tools","developer-tools",{"uuid":177,"title":178,"description":179,"canonical_path":180,"image":181,"width":182,"height":183,"image_alt":184,"kind":45,"categories":185,"app":187},"2b519eb6-46bf-4e4c-9904-3950889fa3b1","Luma UI component","Event detail modal","\u002Fexamples\u002Fapps\u002Fluma\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F072264d3-6d88-4e64-b662-a34af2da7a02.png",1451,1959,"UI component from Luma",[186],{"id":11,"title":12,"slug":48},{"slug":188,"title":189,"logo":190,"baseline":191,"categories":192},"luma","Luma","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fluma-64c4b80f.png","Delightful events start here.",[193,197],{"id":194,"title":195,"slug":196},26,"Events","events",{"id":198,"title":199,"slug":200},4,"Ticketing","ticketing",{"uuid":202,"title":203,"description":204,"canonical_path":205,"image":206,"width":207,"height":208,"image_alt":209,"kind":45,"categories":210,"app":212},"2deb8757-1729-435d-a61a-539dcd5b700b","Record details sidebar","A sidebar panel displaying record details and associated collections. It includes actions to add to a collection or compose an email, a collapsible section for record details with inline editing placeholders, and a card showing collection metadata.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2deb8757-1729-435d-a61a-539dcd5b700b.png",926,1470,"Record details sidebar from Attio",[211],{"id":11,"title":12,"slug":48},{"slug":213,"title":214,"logo":215,"baseline":216,"categories":217},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[218,222],{"id":219,"title":220,"slug":221},53,"CRM","crm",{"id":118,"title":119,"slug":120},{"uuid":224,"title":225,"description":226,"canonical_path":227,"image":228,"width":229,"height":230,"image_alt":231,"kind":45,"categories":232,"app":234},"558f278a-2399-493e-9f38-096da7c41a62","Design settings drawer","A right-side drawer panel for configuring form design settings, including theme selection, font choice, and custom CSS.","\u002Fexamples\u002Fapps\u002Ftally\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F558f278a-2399-493e-9f38-096da7c41a62.png",596,1616,"Design settings drawer from Tally",[233],{"id":11,"title":12,"slug":48},{"slug":235,"title":236,"logo":237,"baseline":238,"categories":239},"tally","Tally","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftally-544c9d50.png","Free Online Form Builder",[240,244],{"id":241,"title":242,"slug":243},69,"Surveys","surveys",{"id":165,"title":166,"slug":167},[],[247,250,253,256,259,262,265,268,271,274,277,280],{"label":248,"to":249},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":251,"to":252},"Design Editor","\u002Fexamples\u002Fscreens\u002Fdesign-editor",{"label":254,"to":255},"Empty State","\u002Fexamples\u002Fscreens\u002Fempty-state",{"label":257,"to":258},"Media Detail","\u002Fexamples\u002Fscreens\u002Fmedia-detail",{"label":260,"to":261},"Rayon design examples","\u002Fexamples\u002Fapps\u002Frayon",{"label":263,"to":264},"Stripe design examples","\u002Fexamples\u002Fapps\u002Fstripe",{"label":266,"to":267},"Photoroom design examples","\u002Fexamples\u002Fapps\u002Fphotoroom",{"label":269,"to":270},"Supernotes design examples","\u002Fexamples\u002Fapps\u002Fsupernotes",{"label":272,"to":273},"Dynaboard design examples","\u002Fexamples\u002Fapps\u002Fdynaboard",{"label":275,"to":276},"Luma design examples","\u002Fexamples\u002Fapps\u002Fluma",{"label":278,"to":279},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":281,"to":282},"Tally design examples","\u002Fexamples\u002Fapps\u002Ftally",{"published_at":284,"updated_at":285},"2022-08-21T20:07:35.000Z","2026-09-25T00:10:31.000Z"]