[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fsupabase\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":219,"links":220,"dates":257},"\u002Fexamples\u002Fapps\u002Fsupabase\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Supabase UI components examples - Nicelydone","Browse Supabase UI component design examples. Preview individual interface elements and explore related component categories. The Open Source Firebase…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F880441a7-b63c-49fe-aa1c-c2fbfc804599.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},"Supabase design examples","\u002Fexamples\u002Fapps\u002Fsupabase",{"label":23,"to":4},"Supabase UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Supabase UI component design examples. Preview individual interface elements and explore related component categories. The Open Source Firebase Alternative",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":31,"categories":35},"Supabase","supabase","The Open Source Firebase Alternative","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsupabase-245dbb6d.png","https:\u002F\u002Fsupabase.com",[36,40,44],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",{"id":41,"title":42,"slug":43},37,"Developer APIs","developer-apis",{"id":45,"title":46,"slug":47},45,"Open Source","open-source",[49,64,79,91,102,117,132,147,162,177,192,204],{"uuid":50,"title":51,"description":52,"canonical_path":4,"image":11,"width":53,"height":54,"image_alt":55,"kind":56,"categories":57,"app":62},"d35ac275-bdd8-4198-a6be-586e3648f6d0","Success Alert with Token","A success alert displaying a newly generated access token. It includes a success icon, a confirmation message, a warning to save the token, and a read-only input field containing the token with a copy button.",2384,496,"Success Alert with Token from Supabase","component",[58],{"id":59,"title":60,"slug":61},167,"Alert","alert",{"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},"fce6a801-15d5-459f-98ad-62d0e90a3507","Theme settings section","A settings section for selecting the interface theme, featuring a section title, a label, a select dropdown with an icon, and helper text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F83f7ce55-d698-45ec-a16b-f3fce0cd8784.png",1436,488,"Theme settings section from Supabase",[73],{"id":74,"title":75,"slug":76},256,"Theme settings","theme-settings",{"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":89},"9495dba0-59ce-4a4b-8d46-b90d97c36d55","Theme selector dropdown","A settings section for selecting the interface theme. It shows an open dropdown menu with 'Dark' currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F38590280-d2c1-4427-b374-eae42f9f467e.png",1477,675,"Theme selector dropdown from Supabase",[88],{"id":74,"title":75,"slug":76},{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":70,"image_alt":97,"kind":56,"categories":98,"app":100},"8a1c5e6c-825a-4ded-bf1b-f00c3715e9d4","Theme selector","A settings section for selecting the interface theme, featuring a dropdown menu currently set to 'Dark'.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F7a6272b3-49b7-4cac-94a0-6f775d419be7.png",1420,"Theme selector from Supabase",[99],{"id":74,"title":75,"slug":76},{"slug":31,"title":30,"logo":33,"categories":101},[],{"uuid":103,"title":104,"description":105,"canonical_path":4,"image":106,"width":107,"height":108,"image_alt":109,"kind":56,"categories":110,"app":115},"ccbcad55-5be3-4670-bacb-b889e2dafd50","Feedback selection chips","A group of selectable chips used to gather feedback on why a user is downgrading their plan. One chip is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb0922cd4-eb54-4805-b841-9fe993ec1be7.png",1892,528,"Feedback selection chips from Supabase",[111],{"id":112,"title":113,"slug":114},260,"Badge","badge",{"slug":31,"title":30,"logo":33,"categories":116},[],{"uuid":118,"title":119,"description":120,"canonical_path":4,"image":121,"width":122,"height":123,"image_alt":124,"kind":56,"categories":125,"app":130},"80f6b055-1c18-4435-8979-eda919ee0849","Invoices Table","A data table displaying a list of invoices with columns for date, amount due, invoice number, and status. Each row includes a download button and a status badge. The table includes a footer with pagination controls.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79386b3a-e134-4de1-9c91-ed80b57c53dd.png",1984,696,"Invoices Table from Supabase",[126],{"id":127,"title":128,"slug":129},248,"Table","table-2",{"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":56,"categories":140,"app":145},"0714df36-654f-4dbc-a96b-e61bfe6a82bf","Usage progress list","A list displaying database usage metrics with progress bars indicating consumption against limits.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1cdc6217-7815-4c72-94bf-43356cf6310a.png",1938,532,"Usage progress list from Supabase",[141],{"id":142,"title":143,"slug":144},186,"Charts","charts",{"slug":31,"title":30,"logo":33,"categories":146},[],{"uuid":148,"title":149,"description":150,"canonical_path":4,"image":151,"width":152,"height":153,"image_alt":154,"kind":56,"categories":155,"app":160},"6a00e4ad-4d61-42bb-ad94-8d0fba24ed1e","Upgrade prompt banner","An inline banner informing the user of a plan limitation and prompting them to upgrade to a higher tier for increased limits.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Febb5522a-7845-4813-b487-198c077d60cb.png",1864,408,"Upgrade prompt banner from Supabase",[156],{"id":157,"title":158,"slug":159},255,"Upgrade your plan","upgrade-your-plan",{"slug":31,"title":30,"logo":33,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":4,"image":166,"width":167,"height":168,"image_alt":169,"kind":56,"categories":170,"app":175},"d20713af-5d20-4992-808d-f5e29992105f","Multi-select input with tags","A multi-select dropdown input field displaying selected options as removable tags.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6fc3425e-b4fd-4917-9ddb-db704fbf04a5.png",1335,332,"Multi-select input with tags from Supabase",[171],{"id":172,"title":173,"slug":174},252,"Input tag","input-tag",{"slug":31,"title":30,"logo":33,"categories":176},[],{"uuid":178,"title":179,"description":180,"canonical_path":4,"image":181,"width":182,"height":183,"image_alt":184,"kind":56,"categories":185,"app":190},"d5599704-f20f-4bf3-a63b-909c36bb5de6","Filter Dropdown","A dropdown menu for filtering by HTTP method, featuring a list of checkboxes and action buttons to clear or save the selection.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F465117bc-4e1a-4c67-9e8e-72e9cfcb1c5a.png",585,894,"Filter Dropdown from Supabase",[186],{"id":187,"title":188,"slug":189},225,"Sorting & filtering","sorting-filtering",{"slug":31,"title":30,"logo":33,"categories":191},[],{"uuid":193,"title":194,"description":195,"canonical_path":4,"image":196,"width":197,"height":198,"image_alt":199,"kind":56,"categories":200,"app":202},"6668975b-ce19-4ad9-8fff-809d8e84ac98","Supabase UI component","A log visualization interface with a modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F65425028-f50a-483b-a3a5-d0f04d76c98e.png",2642,1667,"UI component from Supabase",[201],{"id":142,"title":143,"slug":144},{"slug":31,"title":30,"logo":33,"categories":203},[],{"uuid":205,"title":206,"description":207,"canonical_path":4,"image":208,"width":209,"height":210,"image_alt":211,"kind":56,"categories":212,"app":217},"657f0849-4c2f-466d-8568-60990ad43f10","Filter Toggle Group","A segmented control or toggle group with three options: Status, Product, and Method, used for filtering or grouping data.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F09f24f96-0357-4ffc-be8a-ea93c066120f.png",491,185,"Filter Toggle Group from Supabase",[213],{"id":214,"title":215,"slug":216},277,"Button group","button-group",{"slug":31,"title":30,"logo":33,"categories":218},[],[],[221,224,227,230,233,236,239,241,245,249,253],{"label":222,"to":223},"Supabase product screens","\u002Fexamples\u002Fapps\u002Fsupabase\u002Fscreens",{"label":225,"to":226},"Supabase marketing pages","\u002Fexamples\u002Fapps\u002Fsupabase\u002Fmarketing",{"label":228,"to":229},"Supabase user flows","\u002Fexamples\u002Fapps\u002Fsupabase\u002Fflows",{"label":231,"to":232},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":234,"to":235},"Developer APIs app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-apis",{"label":237,"to":238},"Open Source app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fopen-source",{"label":240,"to":18},"All SaaS app examples",{"label":242,"to":243,"description":244},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":246,"to":247,"description":248},"SaaS marketing page examples","\u002Fexamples\u002Fpages","Browse real SaaS marketing pages grouped by page type, from landing pages to pricing and customer story pages.",{"label":250,"to":251,"description":252},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":254,"to":255,"description":256},"User flow examples from SaaS apps","\u002Fexamples\u002Fflows","Explore user flow examples for sign-up, onboarding, billing, and other SaaS tasks. Compare the order of screens and preview the opening steps from real apps.",{"published_at":258,"updated_at":259},"2023-04-24T00:01:06.000Z","2026-09-13T13:02:39.000Z"]