[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Farrows\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":48,"showcases":221,"links":222,"dates":241},"\u002Fexamples\u002Fapps\u002Farrows\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Arrows UI components examples - Nicelydone","Browse Arrows UI component design examples. Preview individual interface elements and explore related component categories. The collaborative customer…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd3e19ebf-1cf9-485c-afd9-02ca03f446fa.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},"Arrows design examples","\u002Fexamples\u002Fapps\u002Farrows",{"label":23,"to":4},"Arrows UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Arrows UI component design examples. Preview individual interface elements and explore related component categories. The collaborative customer onboarding platform built for HubSpot",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"Arrows","arrows","The collaborative customer onboarding platform built for HubSpot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Farrows-aff15ff3.png","https:\u002F\u002Farrows.to",[36,40,44],{"id":37,"title":38,"slug":39},53,"CRM","crm",{"id":41,"title":42,"slug":43},23,"Collaboration","collaboration",{"id":45,"title":46,"slug":47},29,"Task Management","task-management",[49,64,79,94,109,123,138,150,165,180,195,210],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"81747afa-e09a-490b-b1cb-62a822f9fe0e","Mega Menu","A global navigation header with an expanded mega menu dropdown. The dropdown reveals a list of learning resources and a featured guide card.",3024,1070,"Mega Menu from Arrows","component",[58],{"id":59,"title":60,"slug":61},290,"Flyout menu","flyout-menu",{"slug":31,"title":30,"logo":33,"categories":63},[],{"uuid":65,"title":66,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":71,"kind":56,"categories":72,"app":77},"19c95a1e-bda4-4d88-8575-8377415372fd","Dark theme hero section","A dark-themed hero section featuring a prominent headline, subheadline, dual call-to-action buttons, and a logo wall of customer companies.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8b290c38-5921-47ca-9b22-bd4703641e47.png",3184,1990,"Dark theme hero section from Arrows",[73],{"id":74,"title":75,"slug":76},197,"Hero section","hero-section",{"slug":31,"title":30,"logo":33,"categories":78},[],{"uuid":80,"title":81,"description":82,"canonical_path":4,"image":83,"width":84,"height":85,"image_alt":86,"kind":56,"categories":87,"app":92},"88778497-07bb-4657-a6b6-1001cfb07506","Notification setting toggle","A settings section with a title, a divider, and a single configuration option. The option includes a primary label, a secondary description, and a checked checkbox aligned to the right.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9dc1447f-7851-4139-9a58-57d32d322765.png",1607,444,"Notification setting toggle from Arrows",[88],{"id":89,"title":90,"slug":91},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":56,"categories":102,"app":107},"1156772d-5991-41b2-bbe7-e9df15dd33f1","Number input with label","A number input control with a label indicating 'Days after plan creation date'. The input features minus and plus buttons to decrement or increment the value, currently set to 0.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9e5cf069-b979-418d-8865-db71390f6afc.png",1466,339,"Number input with label from Arrows",[103],{"id":104,"title":105,"slug":106},257,"Input number","input-number",{"slug":31,"title":30,"logo":33,"categories":108},[],{"uuid":110,"title":111,"description":112,"canonical_path":4,"image":113,"width":114,"height":115,"image_alt":116,"kind":56,"categories":117,"app":121},"e239c246-eec6-4060-8415-ea542e85cdba","Tooltip","A dark tooltip displaying the text 'Duplicate template' positioned above a copy icon in a list row.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc0191ac9-d4a6-4da6-8753-5bcf215b63bb.png",461,306,"Tooltip from Arrows",[118],{"id":119,"title":111,"slug":120},254,"tooltip-element",{"slug":31,"title":30,"logo":33,"categories":122},[],{"uuid":124,"title":125,"description":126,"canonical_path":4,"image":127,"width":128,"height":129,"image_alt":130,"kind":56,"categories":131,"app":136},"b5893268-12b4-4f60-a2af-5cc24c75c385","Template list table","A table displaying a list of templates with their names, usage statistics, and task\u002Fphase counts. Each row includes inline edit, duplicate, and delete actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12a99881-4783-4482-b8f8-46f95fc91e97.png",2048,778,"Template list table from Arrows",[132],{"id":133,"title":134,"slug":135},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":137},[],{"uuid":139,"title":140,"description":141,"canonical_path":4,"image":142,"width":143,"height":144,"image_alt":145,"kind":56,"categories":146,"app":148},"28b0be45-40b4-420c-866b-a02b817bdc80","Arrows UI component","A card displaying a startup plan with a progress indicator.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fed31fc39-f66a-4354-9d1f-172fa01f8d40.png",1844,469,"UI component from Arrows",[147],{"id":119,"title":111,"slug":120},{"slug":31,"title":30,"logo":33,"categories":149},[],{"uuid":151,"title":152,"description":153,"canonical_path":4,"image":154,"width":155,"height":156,"image_alt":157,"kind":56,"categories":158,"app":163},"fbbf6033-5a88-4937-8abb-73967d4ef251","Progress pill","A pill-shaped badge displaying a numeric progress ratio alongside a circular progress indicator with a play icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdd1e1f47-db99-47c2-802a-8492b71d179e.png",277,180,"Progress pill from Arrows",[159],{"id":160,"title":161,"slug":162},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":164},[],{"uuid":166,"title":167,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":172,"kind":56,"categories":173,"app":178},"d098d721-df06-4310-b2b2-5ed7afd20d03","Feature gate paywall","A paywall card prompting the user to unlock a premium feature. It includes a badge, a title with a lock icon, a video preview of the feature, a descriptive paragraph, and a primary call-to-action button to contact sales.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F392324fd-546b-45e4-aa83-5b8781b0d160.png",1500,1388,"Feature gate paywall from Arrows",[174],{"id":175,"title":176,"slug":177},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":179},[],{"uuid":181,"title":182,"description":183,"canonical_path":4,"image":184,"width":185,"height":186,"image_alt":187,"kind":56,"categories":188,"app":193},"a1e3d30c-3ff1-4ef5-bb1b-b6f8aae57908","Status dropdown menu","An open dropdown menu for selecting the status of an item, showing options like Active, Complete, Failed, and Archived.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F56d4ef6f-a5ac-4311-a829-5c958c9b318b.png",557,471,"Status dropdown menu from Arrows",[189],{"id":190,"title":191,"slug":192},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":194},[],{"uuid":196,"title":197,"description":198,"canonical_path":4,"image":199,"width":200,"height":201,"image_alt":202,"kind":56,"categories":203,"app":208},"085e75cb-27c8-4fc9-b8cb-0ae706d9f9d9","Engagement Area Chart","A simple area chart displaying engagement over the last 30 days, with a flat line that spikes at the end of the date range.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F48132e0e-3652-4291-a0d6-80010758746f.png",1491,734,"Engagement Area Chart from Arrows",[204],{"id":205,"title":206,"slug":207},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":209},[],{"uuid":211,"title":212,"description":213,"canonical_path":4,"image":214,"width":170,"height":215,"image_alt":216,"kind":56,"categories":217,"app":219},"12aaf821-7938-4f8c-9612-6c253fdd876c","Activity KPI Row","A row of three KPI tiles displaying activity metrics: Tasks completed, Views, and Total engagements.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F33375977-6767-4c2e-baad-0a6aed262128.png",475,"Activity KPI Row from Arrows",[218],{"id":205,"title":206,"slug":207},{"slug":31,"title":30,"logo":33,"categories":220},[],[],[223,226,229,232,235,238],{"label":224,"to":225},"Arrows product screens","\u002Fexamples\u002Fapps\u002Farrows\u002Fscreens",{"label":227,"to":228},"Arrows marketing pages","\u002Fexamples\u002Fapps\u002Farrows\u002Fmarketing",{"label":230,"to":231},"Arrows user flows","\u002Fexamples\u002Fapps\u002Farrows\u002Fflows",{"label":233,"to":234},"CRM app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcrm",{"label":236,"to":237},"Collaboration app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcollaboration",{"label":239,"to":240},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"published_at":242,"updated_at":243},"2023-06-20T13:54:19.000Z","2026-09-26T12:10:06.000Z"]