[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fheight\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":49,"showcases":205,"links":206,"dates":225},"\u002Fexamples\u002Fapps\u002Fheight\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Height UI components examples - Nicelydone","Browse Height UI component design examples. Preview individual interface elements and explore related component categories. Manage projects across…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa6bba92d-4e9a-4114-8d8a-c925dfdd8b13.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},"Height design examples","\u002Fexamples\u002Fapps\u002Fheight",{"label":23,"to":4},"Height UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Height UI component design examples. Preview individual interface elements and explore related component categories. Manage projects across engineering, product, design, and other teams",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Height","height","Manage projects across engineering, product, design, and other teams","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fheight-29b426a4.png","https:\u002F\u002Fheight.app","height_app",[37,41,45],{"id":38,"title":39,"slug":40},86,"Product management","product-management",{"id":42,"title":43,"slug":44},29,"Task Management","task-management",{"id":46,"title":47,"slug":48},30,"Productivity","productivity",[50,65,75,90,105,117,130,139,153,166,179,191],{"uuid":51,"title":52,"description":53,"canonical_path":4,"image":11,"width":54,"height":55,"image_alt":56,"kind":57,"categories":58,"app":63},"560661fe-5d86-4751-99ad-0a0da45b76a1","Height UI component","This is a modal menu with a list of options.",478,765,"UI component from Height","component",[59],{"id":60,"title":61,"slug":62},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":64},[],{"uuid":66,"title":52,"description":67,"canonical_path":4,"image":68,"width":69,"height":70,"image_alt":56,"kind":57,"categories":71,"app":73},"5f1ccb0d-fbca-4eeb-9ad0-b4eb699df20c","A user profile dropdown menu","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5d4ae5ac-5520-4e01-9a7b-d585875b93ee.png",1105,446,[72],{"id":60,"title":61,"slug":62},{"slug":31,"title":30,"logo":33,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":80,"height":81,"image_alt":82,"kind":57,"categories":83,"app":88},"72cdca60-6fb7-435b-9606-0230c468785a","Pricing Modal","A modal displaying three main pricing tiers (Basic, Core, Business) as cards, with an additional Enterprise tier below. It includes a toggle for annual vs monthly billing and lists features for each plan.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F81ac8b04-312d-4e4d-adc9-e7d8848ec049.png",2551,1740,"Pricing Modal from Height",[84],{"id":85,"title":86,"slug":87},303,"Pricing section","pricing-section",{"slug":31,"title":30,"logo":33,"categories":89},[],{"uuid":91,"title":92,"description":93,"canonical_path":4,"image":94,"width":95,"height":96,"image_alt":97,"kind":57,"categories":98,"app":103},"ccc6c4ba-cae3-480a-962e-7f4e4cc43e10","Secret Key Card","A card component displaying a masked secret key with options to reveal and copy it. Includes explanatory text about the key's usage and permissions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2ce980a5-8d82-43d5-943e-1daffeb163c8.png",1416,668,"Secret Key Card from Height",[99],{"id":100,"title":101,"slug":102},241,"Click to copy","click-to-copy",{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":52,"description":107,"canonical_path":4,"image":108,"width":95,"height":109,"image_alt":56,"kind":57,"categories":110,"app":115},"de70117a-6d7c-4692-b27a-2454dd34a11c","A modal showing the status of a Slack integration.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F13b41529-de90-4df6-8481-754c9413bfde.png",707,[111],{"id":112,"title":113,"slug":114},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":116},[],{"uuid":118,"title":52,"description":119,"canonical_path":4,"image":120,"width":121,"height":122,"image_alt":56,"kind":57,"categories":123,"app":128},"5a9d30be-d4ad-40c7-a916-8644a81458c8","A success modal for a Slack integration.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F11972ce6-567b-437b-aff1-acc05806cb55.png",1146,1054,[124],{"id":125,"title":126,"slug":127},284,"Modal","modal",{"slug":31,"title":30,"logo":33,"categories":129},[],{"uuid":131,"title":52,"description":132,"canonical_path":4,"image":133,"width":121,"height":134,"image_alt":56,"kind":57,"categories":135,"app":137},"87c969b3-3d9c-427d-9308-25fd172e3a3d","A modal for channel access settings.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc2097622-f6c5-4a11-9a98-fb2aa9f3f879.png",1160,[136],{"id":125,"title":126,"slug":127},{"slug":31,"title":30,"logo":33,"categories":138},[],{"uuid":140,"title":141,"description":142,"canonical_path":4,"image":143,"width":95,"height":144,"image_alt":145,"kind":57,"categories":146,"app":151},"eebed800-861e-4d1f-9124-7227b4ca183d","Filter Builder with Combobox","A filter configuration block showing a selected 'Teams' attribute and a combobox dropdown open to select specific team values. The dropdown displays a selected 'Designers' tag and options for 'None' and 'Development'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5ce6c399-776a-4f1d-b8ce-d6767e03b817.png",715,"Filter Builder with Combobox from Height",[147],{"id":148,"title":149,"slug":150},252,"Input tag","input-tag",{"slug":31,"title":30,"logo":33,"categories":152},[],{"uuid":154,"title":52,"description":155,"canonical_path":4,"image":156,"width":157,"height":158,"image_alt":56,"kind":57,"categories":159,"app":164},"79a9ab2d-c21e-4e1e-bdf0-b51fd4636a0d","This is a modal with a list of attributes and options.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffffe5688-88ad-489b-a28c-3db308922f62.png",690,931,[160],{"id":161,"title":162,"slug":163},173,"Autocomplete","autocomplete",{"slug":31,"title":30,"logo":33,"categories":165},[],{"uuid":167,"title":52,"description":168,"canonical_path":4,"image":169,"width":170,"height":171,"image_alt":56,"kind":57,"categories":172,"app":177},"84e8a22f-5fb6-4303-a54e-5ca4bf71f152","A modal with a message about a business plan feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fae77fb16-e60e-40de-a2bf-a023c721b58d.png",1414,651,[173],{"id":174,"title":175,"slug":176},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":178},[],{"uuid":180,"title":181,"description":182,"canonical_path":4,"image":183,"width":184,"height":185,"image_alt":186,"kind":57,"categories":187,"app":189},"f565e216-7223-4777-aae8-d92d8235a4c1","Confirmation Modal","A modal dialog asking the user to confirm saving changes to an attribute, warning that it will affect everyone in the workspace. It includes an avatar group showing affected users and action buttons with keyboard shortcuts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0c15cfd0-d1d1-4808-8ce1-0aac462d3329.png",1229,377,"Confirmation Modal from Height",[188],{"id":125,"title":126,"slug":127},{"slug":31,"title":30,"logo":33,"categories":190},[],{"uuid":192,"title":193,"description":194,"canonical_path":4,"image":195,"width":95,"height":196,"image_alt":197,"kind":57,"categories":198,"app":203},"8f0ff791-096d-47d5-85c8-ea334388f195","Notification Settings Radio Group","A radio group allowing users to choose between recommended and custom notification settings. The selected option is highlighted with a border and background color.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb9156ee2-93ec-461b-a101-745c8f2f7dbb.png",544,"Notification Settings Radio Group from Height",[199],{"id":200,"title":201,"slug":202},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":204},[],[],[207,210,213,216,219,222],{"label":208,"to":209},"Height product screens","\u002Fexamples\u002Fapps\u002Fheight\u002Fscreens",{"label":211,"to":212},"Height marketing pages","\u002Fexamples\u002Fapps\u002Fheight\u002Fmarketing",{"label":214,"to":215},"Height user flows","\u002Fexamples\u002Fapps\u002Fheight\u002Fflows",{"label":217,"to":218},"Product management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproduct-management",{"label":220,"to":221},"Task Management app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ftask-management",{"label":223,"to":224},"Productivity app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fproductivity",{"published_at":226,"updated_at":227},"2021-10-18T08:35:58.000Z","2026-09-13T13:02:39.000Z"]