[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Faccordion":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":336,"links":337,"dates":386},"\u002Fexamples\u002Fcomponents\u002Faccordion","collection","components",true,{"example_count":9,"app_count":10},77,64,{"id":12,"title":13,"description":14},168,"Accordion","See how interfaces reveal supporting content one section at a time. Explore accordion headers, expanded states, and content spacing in designs that keep related information together.",{"title":16,"description":17,"og_image":18},"Accordion UI examples - Nicelydone","Accordion UI design examples from SaaS apps. See how interfaces reveal supporting content one section at a time. Explore accordion headers, expanded states,…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3eb7514b-3c2b-47df-a3b9-f504051c2273.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Accordion UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Accordion UI design examples from SaaS apps. See how interfaces reveal supporting content one section at a time. Explore accordion headers, expanded states, and content spacing in designs that keep…",[32],{"title":33,"description":14,"links":34},"About Accordion",[],[36],"77 UI components",[38,72,94,116,134,167,198,220,250,273,292,314],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"d375cd6f-a96d-40f1-ae0a-68f5c4d53a8f","Feature categories accordion","Organizes and displays full list of features in expandable categories for pricing comparison.","\u002Fexamples\u002Fapps\u002Fbeside\u002Fcomponents",1726,1295,"Feature categories accordion from Beside","component",[48],{"id":12,"title":13,"slug":49},"accordion",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"beside","Beside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F8c14025e-58b4-4801-bd91-3e31a3cf8f21.png","AI-powered business phone assistant that answers calls and takes action",[56,60,64,68],{"id":57,"title":58,"slug":59},80,"Artificial Intelligence","artificial-intelligence",{"id":61,"title":62,"slug":63},47,"Customer Service","customer-service",{"id":65,"title":66,"slug":67},53,"CRM","crm",{"id":69,"title":70,"slug":71},82,"Communication","communication",{"uuid":73,"title":74,"description":75,"canonical_path":76,"image":77,"width":78,"height":79,"image_alt":80,"kind":46,"categories":81,"app":83},"ce2f965d-2a08-4de6-92f4-f91f32dd8c98","App Preview Tabs","Displays navigation tabs inside an embedded product demo of the AI video editor interface","\u002Fexamples\u002Fapps\u002Fheygen\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F83a6dc87-a6f3-43b1-b40d-def94178a2a6.png",2994,2359,"App Preview Tabs from HeyGen",[82],{"id":12,"title":13,"slug":49},{"slug":84,"title":85,"logo":86,"baseline":87,"categories":88},"heygen","HeyGen","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fd8cda81f-5b21-444e-8401-676a6cf2f817.png","AI video generator that turns ideas into professional videos in minutes",[89,93],{"id":90,"title":91,"slug":92},100,"Video","video",{"id":57,"title":58,"slug":59},{"uuid":95,"title":96,"description":97,"canonical_path":98,"image":99,"width":100,"height":101,"image_alt":102,"kind":46,"categories":103,"app":105},"76d16102-0d2a-433e-84e9-6439388a56b6","Elevenlabs UI component","A web page showcasing features of a knowledge base system with document management and customization options.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F30265783-4967-4258-99b2-9bd9d797c111.png",2048,1501,"UI component from Elevenlabs",[104],{"id":12,"title":13,"slug":49},{"slug":106,"title":107,"logo":108,"baseline":109,"categories":110},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[111,112],{"id":57,"title":58,"slug":59},{"id":113,"title":114,"slug":115},37,"Developer APIs","developer-apis",{"uuid":117,"title":118,"description":119,"canonical_path":120,"image":121,"width":122,"height":123,"image_alt":124,"kind":46,"categories":125,"app":127},"d1047bb7-a9e2-456b-a1f7-58e1e614ae1f","Poolside UI component","A user interface displaying deployment model options with a descriptive text for the selected option and an isometric illustration.","\u002Fexamples\u002Fapps\u002Fpoolside\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd471d1bc-53bf-40ca-93cc-e7437b0c3b0a.png",2496,1701,"UI component from Poolside",[126],{"id":12,"title":13,"slug":49},{"slug":128,"title":129,"logo":130,"baseline":131,"categories":132},"poolside","Poolside","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fde1e48e8-a8ea-49fc-a7ae-809596fc1bd8.png","Iterate on web apps, APIs, and CLIs from scratch, in a single workspace",[133],{"id":57,"title":58,"slug":59},{"uuid":135,"title":136,"description":137,"canonical_path":138,"image":139,"width":140,"height":141,"image_alt":142,"kind":46,"categories":143,"app":145},"c4eca588-1b55-42ae-98be-99c2e49a2f62","Linear UI component","A dark mode interface displaying technical specifications as a list of categories with navigation icons.","\u002Fexamples\u002Fapps\u002Flinear\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F63e3ebfe-c8df-4529-ac40-0ec8db040ba0.png",2206,1222,"UI component from Linear",[144],{"id":12,"title":13,"slug":49},{"slug":146,"title":147,"logo":148,"baseline":149,"categories":150},"linear","Linear","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Flinear-c6809667.png","The issue tracking tool you'll enjoy using",[151,155,159,163],{"id":152,"title":153,"slug":154},29,"Task Management","task-management",{"id":156,"title":157,"slug":158},30,"Productivity","productivity",{"id":160,"title":161,"slug":162},23,"Collaboration","collaboration",{"id":164,"title":165,"slug":166},86,"Product management","product-management",{"uuid":168,"title":169,"description":170,"canonical_path":171,"image":172,"width":173,"height":174,"image_alt":175,"kind":46,"categories":176,"app":178},"8117f905-9727-4b49-95c2-2bfe054cf225","Bird UI component","A form for selecting sender type and use case for a messaging solution, presented as an accordion.","\u002Fexamples\u002Fapps\u002Fbird\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe468bfd1-8036-41c3-b1b0-89eb17916abc.png",1216,1309,"UI component from Bird",[177],{"id":12,"title":13,"slug":49},{"slug":179,"title":180,"logo":181,"baseline":182,"categories":183},"bird","Bird","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F438a1831-3604-472d-a383-2892bbd37a63.png","Unified CRM for Marketing, Service & Payments",[184,188,189,190,194],{"id":185,"title":186,"slug":187},25,"Marketing","marketing",{"id":113,"title":114,"slug":115},{"id":65,"title":66,"slug":67},{"id":191,"title":192,"slug":193},68,"SMS","sms",{"id":195,"title":196,"slug":197},92,"Email","email",{"uuid":199,"title":200,"description":201,"canonical_path":202,"image":203,"width":204,"height":205,"image_alt":206,"kind":46,"categories":207,"app":209},"0c7be4d8-7cb5-42d2-914a-90593b6818cc","Ona UI component","A web page displaying a list of company principles or values using an accordion UI component.","\u002Fexamples\u002Fapps\u002Fona\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2cbf27ba-b6b7-4587-82f0-d987d12359f2.png",1878,1666,"UI component from Ona",[208],{"id":12,"title":13,"slug":49},{"slug":210,"title":211,"logo":212,"baseline":213,"categories":214},"ona","Ona","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F5f04e4d2-1820-448d-8510-4d55ff185524.png","The AI software engineer you can rely on",[215,219],{"id":216,"title":217,"slug":218},48,"Developer Tools","developer-tools",{"id":57,"title":58,"slug":59},{"uuid":221,"title":222,"description":223,"canonical_path":224,"image":225,"width":226,"height":227,"image_alt":228,"kind":46,"categories":229,"app":231},"69889b03-fadb-4c3e-a049-327f9bb1e18a","Typeform UI component","A landing page section showcasing lead generation features with an interactive mobile form illustration and data enrichment details.","\u002Fexamples\u002Fapps\u002Ftypeform\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc1fb5b03-7df5-455d-ae86-1ae035f9fb0c.png",3024,2129,"UI component from Typeform",[230],{"id":12,"title":13,"slug":49},{"slug":232,"title":233,"logo":234,"baseline":235,"categories":236},"typeform","Typeform","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ftypeform-20f4caed.png","Free & beautifully human online forms",[237,241,242,246],{"id":238,"title":239,"slug":240},69,"Surveys","surveys",{"id":185,"title":186,"slug":187},{"id":243,"title":244,"slug":245},96,"No code","no-code",{"id":247,"title":248,"slug":249},104,"User Research","user-research",{"uuid":251,"title":252,"description":253,"canonical_path":254,"image":255,"width":256,"height":257,"image_alt":258,"kind":46,"categories":259,"app":261},"99f9e600-eef2-449a-800b-55c5f1c5da85","Gather UI component","A web page providing a guide for users to migrate to a new version of a product, featuring a sidebar navigation and an accordion-style content section.","\u002Fexamples\u002Fapps\u002Fgather\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb8008fa3-8324-4ac0-b6c8-56f166ae459f.png",2816,1503,"UI component from Gather",[260],{"id":12,"title":13,"slug":49},{"slug":262,"title":263,"logo":264,"baseline":265,"categories":266},"gather","Gather","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1eb4004c-e6ed-4f6c-bc14-37588eaa306c.png","People + knowledge. All in one place",[267,268,269],{"id":160,"title":161,"slug":162},{"id":69,"title":70,"slug":71},{"id":270,"title":271,"slug":272},89,"Remote","remote",{"uuid":274,"title":275,"description":276,"canonical_path":277,"image":278,"width":279,"height":280,"image_alt":281,"kind":46,"categories":282,"app":284},"ce54a8b3-f78e-466b-b012-64f213de86d2","Attio UI component","A collaborative note taking interface.","\u002Fexamples\u002Fapps\u002Fattio\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F69494bfe-f2fc-4f51-beb6-8de8f6d0eefe.png",2569,1700,"UI component from Attio",[283],{"id":12,"title":13,"slug":49},{"slug":285,"title":286,"logo":287,"baseline":288,"categories":289},"attio","Attio","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fattio-nqag2fca.png","Customer relationship magic",[290,291],{"id":65,"title":66,"slug":67},{"id":57,"title":58,"slug":59},{"uuid":293,"title":294,"description":295,"canonical_path":296,"image":297,"width":226,"height":298,"image_alt":299,"kind":46,"categories":300,"app":302},"6308b1f3-1ad6-49dc-95b8-4e2773d5426b","Quin UI component","The screenshot showcases a landing page for a product called Quin, targeting professionals who drive business forward, with a focus on financial advisors.","\u002Fexamples\u002Fapps\u002Fquin\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12d9a049-8336-45d8-9c7c-0821a61181eb.png",2544,"UI component from Quin",[301],{"id":12,"title":13,"slug":49},{"slug":303,"title":304,"logo":305,"baseline":306,"categories":307},"quin","Quin","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fb4f27845-aeea-4c59-b6e7-8a255620ae41.png","Meet your dream assistant",[308,309,310],{"id":57,"title":58,"slug":59},{"id":156,"title":157,"slug":158},{"id":311,"title":312,"slug":313},105,"Workflow Automation","workflow-automation",{"uuid":315,"title":316,"description":317,"canonical_path":318,"image":319,"width":320,"height":321,"image_alt":322,"kind":46,"categories":323,"app":325},"660b8a77-a147-4fb8-affe-faf808d7f418","Kinsta UI component","A modal for creating a manual backup with a text field for adding a note.","\u002Fexamples\u002Fapps\u002Fkinsta\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4c572f1b-7893-49c9-a40f-0d02c72b0276.png",2784,1891,"UI component from Kinsta",[324],{"id":12,"title":13,"slug":49},{"slug":326,"title":327,"logo":328,"baseline":329,"categories":330},"kinsta","Kinsta","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F1206afb6-473b-4871-9c3a-5ae09d868502.png","Simply better hosting for WordPress",[331,335],{"id":332,"title":333,"slug":334},7,"Web Development","web-development",{"id":216,"title":217,"slug":218},[],[338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383],{"label":339,"to":340},"Product Page","\u002Fexamples\u002Fpages\u002Fproduct-page",{"label":342,"to":343},"Feature Page","\u002Fexamples\u002Fpages\u002Ffeature-page",{"label":345,"to":346},"Landing Page","\u002Fexamples\u002Fpages\u002Flanding-page",{"label":348,"to":349},"Guide","\u002Fexamples\u002Fpages\u002Fguide",{"label":351,"to":352},"Beside design examples","\u002Fexamples\u002Fapps\u002Fbeside",{"label":354,"to":355},"HeyGen design examples","\u002Fexamples\u002Fapps\u002Fheygen",{"label":357,"to":358},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":360,"to":361},"Poolside design examples","\u002Fexamples\u002Fapps\u002Fpoolside",{"label":363,"to":364},"Linear design examples","\u002Fexamples\u002Fapps\u002Flinear",{"label":366,"to":367},"Bird design examples","\u002Fexamples\u002Fapps\u002Fbird",{"label":369,"to":370},"Ona design examples","\u002Fexamples\u002Fapps\u002Fona",{"label":372,"to":373},"Typeform design examples","\u002Fexamples\u002Fapps\u002Ftypeform",{"label":375,"to":376},"Gather design examples","\u002Fexamples\u002Fapps\u002Fgather",{"label":378,"to":379},"Attio design examples","\u002Fexamples\u002Fapps\u002Fattio",{"label":381,"to":382},"Quin design examples","\u002Fexamples\u002Fapps\u002Fquin",{"label":384,"to":385},"Kinsta design examples","\u002Fexamples\u002Fapps\u002Fkinsta",{"published_at":387,"updated_at":388},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]