[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Frender\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":44,"showcases":210,"links":211,"dates":227},"\u002Fexamples\u002Fapps\u002Frender\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Render UI components examples - Nicelydone","Browse Render UI component design examples. Preview individual interface elements and explore related component categories. Cloud application hosting for…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9dce0d3e-4c7c-445e-b0b6-fd8b01d0fb89.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},"Render design examples","\u002Fexamples\u002Fapps\u002Frender",{"label":23,"to":4},"Render UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Render UI component design examples. Preview individual interface elements and explore related component categories. Cloud application hosting for developers",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Render","render","Cloud application hosting for developers","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Frender-5d06ef7d.png","https:\u002F\u002Frender.com",[36,40],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",{"id":41,"title":42,"slug":43},7,"Web Development","web-development",[45,60,75,90,105,120,132,144,153,168,183,195],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"173ff653-a566-4206-b810-d95ed3997bd5","Success Toast Notification","A toast notification indicating a successful action, featuring a green checkmark icon, a text message, and a close button.",966,341,"Success Toast Notification from Render","component",[54],{"id":55,"title":56,"slug":57},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":65,"height":66,"image_alt":67,"kind":52,"categories":68,"app":73},"b936f8a8-96e6-4382-953e-c4f2be0ad1ce","Copy to clipboard field with tooltip","A read-only input field displaying an API key, paired with a copy button. A tooltip indicates the text has been successfully copied.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6df72b2c-9cc0-4e1d-9c9c-8a4222bb217b.png",1089,234,"Copy to clipboard field with tooltip from Render",[69],{"id":70,"title":71,"slug":72},241,"Click to copy","click-to-copy",{"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":52,"categories":83,"app":88},"3f47d858-f507-4a96-ad21-76aeeaa530cd","Workspace Switcher Dropdown","An expanded dropdown menu for switching workspaces or accounts, showing the current user email, active team, and links to create a new team, team settings, billing, and sign out.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F895227f4-32a8-47ca-99e2-45820474646d.png",681,840,"Workspace Switcher Dropdown from Render",[84],{"id":85,"title":86,"slug":87},190,"Dropdown menu","dropdown-menu",{"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":52,"categories":98,"app":103},"c4f49831-fe6b-4358-b4d2-d3fc674959bf","Compute spec selector","A horizontal radio group displaying two compute specification options as selectable cards. Each card shows the plan name, price per 1,000 minutes, CPU, and RAM details.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa26fb1a8-ff55-467f-9262-2f34f13fefe9.png",2227,454,"Compute spec selector from Render",[99],{"id":100,"title":101,"slug":102},179,"Checkbox & radio","checkbox-radio",{"slug":31,"title":30,"logo":33,"categories":104},[],{"uuid":106,"title":107,"description":108,"canonical_path":4,"image":109,"width":110,"height":111,"image_alt":112,"kind":52,"categories":113,"app":118},"0bc18f55-edfc-4f10-b860-59df9707be2d","Two-Factor Authentication Settings Card","A settings card allowing users to enforce two-factor authentication for their team. It includes a title, description with a link, a toggle switch indicating the 'Enforced' state, and a success alert confirming all members have enabled it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4556fdc7-6bb7-4059-ac3a-f67a51885b19.png",2348,598,"Two-Factor Authentication Settings Card from Render",[114],{"id":115,"title":116,"slug":117},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":119},[],{"uuid":121,"title":122,"description":123,"canonical_path":4,"image":124,"width":125,"height":126,"image_alt":127,"kind":52,"categories":128,"app":130},"5361d142-4be3-4250-b126-23c38487e85d","Settings toggle row","A horizontal settings row with a title, description containing a link, and a toggle switch to enforce two-factor authentication.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F31bfb56f-afa6-4efe-94d3-c59a1774efc9.png",2223,351,"Settings toggle row from Render",[129],{"id":100,"title":101,"slug":102},{"slug":31,"title":30,"logo":33,"categories":131},[],{"uuid":133,"title":134,"description":135,"canonical_path":4,"image":136,"width":137,"height":138,"image_alt":139,"kind":52,"categories":140,"app":142},"b0a401ae-70f8-4fd4-aa97-77fc1cbb7138","Account switch toast","A toast notification confirming that the user has switched to their personal account. It features an info icon, a message, a close button, and a colored bottom border.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5b17bf26-196a-4e24-ba86-1d7b4c5fdc83.png",864,249,"Account switch toast from Render",[141],{"id":55,"title":56,"slug":57},{"slug":31,"title":30,"logo":33,"categories":143},[],{"uuid":145,"title":122,"description":146,"canonical_path":4,"image":147,"width":148,"height":126,"image_alt":127,"kind":52,"categories":149,"app":151},"b4a30d00-151c-484c-a26b-497a0734416c","A horizontal settings row with a title, description containing a link, and a toggle switch indicating an 'off' state.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2996bb71-f46f-442f-82ae-a86612d551c8.png",2215,[150],{"id":100,"title":101,"slug":102},{"slug":31,"title":30,"logo":33,"categories":152},[],{"uuid":154,"title":155,"description":156,"canonical_path":4,"image":157,"width":158,"height":159,"image_alt":160,"kind":52,"categories":161,"app":166},"e3c34580-88c6-4ff0-9a85-5952e610fd59","Pending Invite Row","A row displaying an invited user's email address alongside a 'Pending Invite' badge, indicating their invitation status.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb261d84b-2c19-4d35-8a8e-3ceca6432be2.png",736,180,"Pending Invite Row from Render",[162],{"id":163,"title":164,"slug":165},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":167},[],{"uuid":169,"title":170,"description":171,"canonical_path":4,"image":172,"width":173,"height":174,"image_alt":175,"kind":52,"categories":176,"app":181},"a2ad1e5b-51f1-4f0c-9db7-444b8af8f046","Email invite input and actions","A form section containing an input field for email addresses, which converts entered emails into removable tags. Below the input are 'Cancel' and 'Send invite' action buttons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdcc3be1e-5f1f-4e48-80f3-ddddaf7f939e.png",1248,512,"Email invite input and actions from Render",[177],{"id":178,"title":179,"slug":180},252,"Input tag","input-tag",{"slug":31,"title":30,"logo":33,"categories":182},[],{"uuid":184,"title":185,"description":186,"canonical_path":4,"image":187,"width":188,"height":189,"image_alt":190,"kind":52,"categories":191,"app":193},"df3d064e-03a7-4a60-9bce-d269304b50e8","Transfer Services Radio Group","A radio group for selecting whether to transfer services to a new team, featuring a title, description, and two options with helper text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcfbbfeb2-4cf8-4b63-ab25-75da8228942f.png",1396,695,"Transfer Services Radio Group from Render",[192],{"id":100,"title":101,"slug":102},{"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":52,"categories":203,"app":208},"9aa66a82-9861-4fc0-8864-253534e4ec24","Services table","A data table listing deployed services with columns for service name, status, type, runtime, region, and last deployed time.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa9449a84-7b48-44c2-8c4e-0a2375480ccb.png",2704,669,"Services table from Render",[204],{"id":205,"title":206,"slug":207},248,"Table","table-2",{"slug":31,"title":30,"logo":33,"categories":209},[],[],[212,215,218,221,224],{"label":213,"to":214},"Render product screens","\u002Fexamples\u002Fapps\u002Frender\u002Fscreens",{"label":216,"to":217},"Render marketing pages","\u002Fexamples\u002Fapps\u002Frender\u002Fmarketing",{"label":219,"to":220},"Render user flows","\u002Fexamples\u002Fapps\u002Frender\u002Fflows",{"label":222,"to":223},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":225,"to":226},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"published_at":228,"updated_at":229},"2024-02-19T09:22:46.000Z","2026-09-20T00:05:29.000Z"]