[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fcolumn\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":47,"showcases":209,"links":210,"dates":229},"\u002Fexamples\u002Fapps\u002Fcolumn\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Column UI components examples - Nicelydone","Browse Column UI component design examples. Preview individual interface elements and explore related component categories. The developer infrastructure bank","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb126b96e-7305-4eb3-9ac6-30987f40acea.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},"Column design examples","\u002Fexamples\u002Fapps\u002Fcolumn",{"label":23,"to":4},"Column 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":30,"categories":34},"Column","column","The developer infrastructure bank","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcolumn-60eggyn0.png","https:\u002F\u002Fcolumn.com",[35,39,43],{"id":36,"title":37,"slug":38},36,"Finance","finance",{"id":40,"title":41,"slug":42},37,"Developer APIs","developer-apis",{"id":44,"title":45,"slug":46},39,"Payments","payments",[48,63,72,87,102,110,125,140,155,167,182,197],{"uuid":49,"title":50,"description":51,"canonical_path":4,"image":11,"width":52,"height":53,"image_alt":54,"kind":55,"categories":56,"app":61},"6813dfc9-ccb7-4794-8957-49d1c8a111b4","Date range picker","A dual-pane calendar component for selecting a date range, featuring quick selection presets on the right.",1982,944,"Date range picker from Column","component",[57],{"id":58,"title":59,"slug":60},184,"Datepicker","datepicker",{"slug":30,"title":29,"logo":32,"categories":62},[],{"uuid":64,"title":50,"description":65,"canonical_path":4,"image":66,"width":52,"height":67,"image_alt":54,"kind":55,"categories":68,"app":70},"c1318920-a8b9-4bf6-9013-7c8b2aa31bb0","A dual-calendar date range picker with a sidebar for quick preset selections.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6c116bec-7eb6-404e-84d1-325b50f1d776.png",942,[69],{"id":58,"title":59,"slug":60},{"slug":30,"title":29,"logo":32,"categories":71},[],{"uuid":73,"title":74,"description":75,"canonical_path":4,"image":76,"width":77,"height":78,"image_alt":79,"kind":55,"categories":80,"app":85},"0e0c1524-a97e-4f89-9116-c7bda46801a6","Error Alert with Action","An inline error alert component displaying a validation message and a 'Create' action button. It features a red border, a red error icon, and grey text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7cc3f01e-5a1c-4af9-81d5-0167f417d799.png",2336,352,"Error Alert with Action from Column",[81],{"id":82,"title":83,"slug":84},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":86},[],{"uuid":88,"title":89,"description":90,"canonical_path":4,"image":91,"width":92,"height":93,"image_alt":94,"kind":55,"categories":95,"app":100},"53d652a9-bd22-4a54-876f-6ed8f040155e","Currency Input Field","A form field for entering a maximum principal balance, featuring a dollar sign prefix, a placeholder for the amount, and a currency selector dropdown.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faaee4b9f-6766-43f7-b654-77c3b358db55.png",1268,379,"Currency Input Field from Column",[96],{"id":97,"title":98,"slug":99},198,"Input amount","input-amount",{"slug":30,"title":29,"logo":32,"categories":101},[],{"uuid":103,"title":89,"description":104,"canonical_path":4,"image":105,"width":92,"height":93,"image_alt":94,"kind":55,"categories":106,"app":108},"b19e6775-d488-4ea8-b2a1-7665585685c4","A form input field for entering a monetary amount, featuring a currency symbol prefix and a currency selector dropdown.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff23817c3-1677-44af-a5e9-9c4d7d86fc51.png",[107],{"id":97,"title":98,"slug":99},{"slug":30,"title":29,"logo":32,"categories":109},[],{"uuid":111,"title":112,"description":113,"canonical_path":4,"image":114,"width":115,"height":116,"image_alt":117,"kind":55,"categories":118,"app":123},"fe23bf0a-1f2b-443c-b197-503951bd5b42","Payment Method Radio Group","A radio group component for selecting a payment method. It features a section title with a checkmark icon, a label, and three horizontal radio button options styled as cards.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7111b11b-6dc3-4125-a053-fde981c41dc4.png",2424,552,"Payment Method Radio Group from Column",[119],{"id":120,"title":121,"slug":122},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":124},[],{"uuid":126,"title":127,"description":128,"canonical_path":4,"image":129,"width":130,"height":131,"image_alt":132,"kind":55,"categories":133,"app":138},"8508fab7-2a4d-4fae-bf8a-ffbf0169fc4f","Empty state with actions","An empty state message indicating no transfers were found, accompanied by a row of four primary action buttons to create different types of transfers.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6fdc4445-18fd-4070-af7f-f06c720c1c31.png",843,372,"Empty state with actions from Column",[134],{"id":135,"title":136,"slug":137},277,"Button group","button-group",{"slug":30,"title":29,"logo":32,"categories":139},[],{"uuid":141,"title":142,"description":143,"canonical_path":4,"image":144,"width":145,"height":146,"image_alt":147,"kind":55,"categories":148,"app":153},"7d969ff2-6d01-4878-8676-6c8101a2ff8d","Phone number input with country code dropdown","A phone number input field with an expanded dropdown menu for selecting the country code. The dropdown includes a search bar and a list of countries with their respective dialing codes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2e8a0bf2-0799-401b-a248-006f96725bf6.png",1008,887,"Phone number input with country code dropdown from Column",[149],{"id":150,"title":151,"slug":152},203,"Input phone number","input-phone-number",{"slug":30,"title":29,"logo":32,"categories":154},[],{"uuid":156,"title":157,"description":158,"canonical_path":4,"image":159,"width":160,"height":161,"image_alt":162,"kind":55,"categories":163,"app":165},"1cc7c59d-9758-4b67-aad7-f34e0dab0791","Phone number input","A form field for entering a phone number, featuring a country code selector and placeholder text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F404b13a5-daf4-4aef-b079-5cdaa8258d03.png",856,250,"Phone number input from Column",[164],{"id":150,"title":151,"slug":152},{"slug":30,"title":29,"logo":32,"categories":166},[],{"uuid":168,"title":169,"description":170,"canonical_path":4,"image":171,"width":172,"height":173,"image_alt":174,"kind":55,"categories":175,"app":180},"c2fc38ec-2722-4ae5-83e1-fa2eda6cea46","Event type combobox","A combobox input for selecting an event type, shown in an expanded state with a search filter and one matching result. A 'Send' button is positioned alongside it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fddf9d69e-e7a3-4b49-b6c9-830c1517967f.png",1514,575,"Event type combobox from Column",[176],{"id":177,"title":178,"slug":179},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":181},[],{"uuid":183,"title":184,"description":185,"canonical_path":4,"image":186,"width":187,"height":188,"image_alt":189,"kind":55,"categories":190,"app":195},"3bde8ad7-c65a-4a40-8188-950ff20edc68","Success Banner","A full-width success banner indicating a webhook was successfully added. It features a green checkmark icon, a text message, and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe59b8b36-4238-4e01-9849-2be52df88b9a.png",2658,392,"Success Banner from Column",[191],{"id":192,"title":193,"slug":194},244,"Message","message",{"slug":30,"title":29,"logo":32,"categories":196},[],{"uuid":198,"title":199,"description":200,"canonical_path":4,"image":201,"width":202,"height":203,"image_alt":204,"kind":55,"categories":205,"app":207},"867b7df8-e86a-4b3e-b903-708137e74994","Searchable Combobox Dropdown","An open combobox dropdown menu featuring a search input at the top and a list of selectable event types below.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fedf43d46-47a5-441a-88db-6dd6cdbc761d.png",837,740,"Searchable Combobox Dropdown from Column",[206],{"id":177,"title":178,"slug":179},{"slug":30,"title":29,"logo":32,"categories":208},[],[],[211,214,217,220,223,226],{"label":212,"to":213},"Column product screens","\u002Fexamples\u002Fapps\u002Fcolumn\u002Fscreens",{"label":215,"to":216},"Column marketing pages","\u002Fexamples\u002Fapps\u002Fcolumn\u002Fmarketing",{"label":218,"to":219},"Column user flows","\u002Fexamples\u002Fapps\u002Fcolumn\u002Fflows",{"label":221,"to":222},"Finance app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Ffinance",{"label":224,"to":225},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":227,"to":228},"Payments app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fpayments",{"published_at":230,"updated_at":231},"2023-04-23T18:43:25.000Z","2026-09-13T13:02:39.000Z"]