[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fclerk\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":44,"showcases":197,"links":198,"dates":214},"\u002Fexamples\u002Fapps\u002Fclerk\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Clerk UI components examples - Nicelydone","Browse Clerk UI component design examples. Preview individual interface elements and explore related component categories. Authentication and User Management","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe5281b19-6745-4787-bb30-a37b18902d5a.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},"Clerk design examples","\u002Fexamples\u002Fapps\u002Fclerk",{"label":23,"to":4},"Clerk 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":34,"categories":35},"Clerk","clerk","Authentication and User Management","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fclerk-672b27f0.png","https:\u002F\u002Fclerk.com","ClerkDev",[36,40],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",{"id":41,"title":42,"slug":43},78,"Security","security",[45,60,74,82,95,110,125,137,150,165,175,185],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"4ccafd4c-482d-42ca-a1ec-85f327a4e846","Add Phone Number Form","A form section for adding a phone number, featuring a country code selector and an input field, enclosed within a card layout.",1474,697,"Add Phone Number Form from Clerk","component",[54],{"id":55,"title":56,"slug":57},257,"Input number","input-number",{"slug":30,"title":29,"logo":32,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":49,"height":65,"image_alt":66,"kind":52,"categories":67,"app":72},"35d423bd-e5b6-4f77-ab3b-5f74a2dc6983","Clerk UI component","Email verification modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fad1b9241-05a0-4ac2-80b2-d7442414a8ee.png",846,"UI component from Clerk",[68],{"id":69,"title":70,"slug":71},288,"Input code","input-code",{"slug":30,"title":29,"logo":32,"categories":73},[],{"uuid":75,"title":62,"description":63,"canonical_path":4,"image":76,"width":49,"height":77,"image_alt":66,"kind":52,"categories":78,"app":80},"e1e543be-a1e9-440e-a411-8b61f46c62fb","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ffbec4d8a-dbb1-49d6-ade1-864d6cae9853.png",835,[79],{"id":69,"title":70,"slug":71},{"slug":30,"title":29,"logo":32,"categories":81},[],{"uuid":83,"title":62,"description":84,"canonical_path":4,"image":85,"width":86,"height":87,"image_alt":66,"kind":52,"categories":88,"app":93},"c4235137-a6bb-42d0-aae4-ed534c2ec3c8","A user account dropdown menu","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5ac06ced-f942-4960-a044-b85f99ae81a2.png",797,499,[89],{"id":90,"title":91,"slug":92},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":94},[],{"uuid":96,"title":97,"description":98,"canonical_path":4,"image":99,"width":100,"height":101,"image_alt":102,"kind":52,"categories":103,"app":108},"6bfef9ce-a333-4c75-905e-47e05597d192","Upgrade Prompt Banner","A horizontal banner displaying a usage limit and a call to action to upgrade. It features a circular progress indicator showing current usage against the limit.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F39167473-2cc9-4868-85a8-291695609e33.png",1464,384,"Upgrade Prompt Banner from Clerk",[104],{"id":105,"title":106,"slug":107},213,"Progress indicator","progress-indicator",{"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":52,"categories":118,"app":123},"0805a98e-aedc-447c-bf8d-52fe5be4f571","Member Invitation Form","A form card for inviting new members to an organization. It includes a multi-email input field with tag-like chips for entered addresses, a role selection dropdown, and action buttons to send invitations or cancel.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb6a48f1e-4c79-4f0c-b524-6757dad9218d.png",1470,740,"Member Invitation Form from Clerk",[119],{"id":120,"title":121,"slug":122},179,"Checkbox & radio","checkbox-radio",{"slug":30,"title":29,"logo":32,"categories":124},[],{"uuid":126,"title":62,"description":127,"canonical_path":4,"image":128,"width":115,"height":129,"image_alt":66,"kind":52,"categories":130,"app":135},"c2596d44-989f-4c81-836e-df92b6a1b4cc","A modal displaying member information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5d68a231-f015-492c-9df5-66919606ac30.png",429,[131],{"id":132,"title":133,"slug":134},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":136},[],{"uuid":138,"title":139,"description":140,"canonical_path":4,"image":141,"width":115,"height":116,"image_alt":142,"kind":52,"categories":143,"app":148},"1885f396-d065-4c6b-8edd-f83269b14f1b","Invite Members Form","A form card for inviting new members by email. It includes a textarea for entering multiple email addresses, a role selection dropdown, and action buttons to cancel or send the invitations.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd0745bf3-7f52-4a20-a403-ee6f800e850c.png","Invite Members Form from Clerk",[144],{"id":145,"title":146,"slug":147},252,"Input tag","input-tag",{"slug":30,"title":29,"logo":32,"categories":149},[],{"uuid":151,"title":152,"description":153,"canonical_path":4,"image":154,"width":155,"height":156,"image_alt":157,"kind":52,"categories":158,"app":163},"c793f795-bcb0-4a02-ad21-6f552b2c4c57","Breadcrumb with Selectors","A breadcrumb navigation component where each segment acts as a dropdown selector. It displays the current account, project, and environment hierarchy.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5f808277-c53a-411f-a268-c4f1ac1dc5a0.png",1228,293,"Breadcrumb with Selectors from Clerk",[159],{"id":160,"title":161,"slug":162},177,"Breadcrumb","breadcrumb",{"slug":30,"title":29,"logo":32,"categories":164},[],{"uuid":166,"title":62,"description":167,"canonical_path":4,"image":168,"width":169,"height":170,"image_alt":66,"kind":52,"categories":171,"app":173},"27919bd1-a580-40f7-a7e1-0e23da0c8859","A dropdown menu with a selected item and an action item","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6d5942b0-4d66-4aa8-a16c-641dfd30f6ed.png",583,290,[172],{"id":90,"title":91,"slug":92},{"slug":30,"title":29,"logo":32,"categories":174},[],{"uuid":176,"title":62,"description":177,"canonical_path":4,"image":178,"width":179,"height":180,"image_alt":66,"kind":52,"categories":181,"app":183},"3b63adb3-baf3-44df-857d-ef93e6390c62","A modal for creating a production instance with options to clone or create a default instance.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F618b2d32-a38f-4329-8f5e-1cab92cc3503.png",997,826,[182],{"id":120,"title":121,"slug":122},{"slug":30,"title":29,"logo":32,"categories":184},[],{"uuid":186,"title":62,"description":187,"canonical_path":4,"image":188,"width":189,"height":77,"image_alt":66,"kind":52,"categories":190,"app":195},"a59aaef1-f071-41e8-919c-eba57366056a","A modal prompting the user to upgrade their plan to access certain features.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb396d5aa-7b23-4f83-a53b-8c7d773ebacd.png",1137,[191],{"id":192,"title":193,"slug":194},255,"Upgrade your plan","upgrade-your-plan",{"slug":30,"title":29,"logo":32,"categories":196},[],[],[199,202,205,208,211],{"label":200,"to":201},"Clerk product screens","\u002Fexamples\u002Fapps\u002Fclerk\u002Fscreens",{"label":203,"to":204},"Clerk marketing pages","\u002Fexamples\u002Fapps\u002Fclerk\u002Fmarketing",{"label":206,"to":207},"Clerk user flows","\u002Fexamples\u002Fapps\u002Fclerk\u002Fflows",{"label":209,"to":210},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":212,"to":213},"Security app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fsecurity",{"published_at":215,"updated_at":216},"2023-05-09T00:53:02.000Z","2026-09-13T13:02:39.000Z"]