[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fneon\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":28,"examples":40,"showcases":202,"links":203,"dates":234},"\u002Fexamples\u002Fapps\u002Fneon\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Neon UI components examples - Nicelydone","Browse Neon UI component design examples. Preview individual interface elements and explore related component categories. Ship faster with Postgres","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F0accadf8-7d93-4f68-bc3f-5f9ed956f1d4.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},"Neon design examples","\u002Fexamples\u002Fapps\u002Fneon",{"label":23,"to":4},"Neon 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},"Neon","neon","Ship faster with Postgres","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fneon-88e8cfac.png","https:\u002F\u002Fneon.tech","neondatabase",[36],{"id":37,"title":38,"slug":39},48,"Developer Tools","developer-tools",[41,56,71,86,94,109,124,135,150,162,177,192],{"uuid":42,"title":43,"description":44,"canonical_path":4,"image":11,"width":45,"height":46,"image_alt":47,"kind":48,"categories":49,"app":54},"8d8a2ab7-765a-4388-923a-6e142027970d","Features Dropdown Menu","A dark-themed dropdown menu displaying a list of product features. Each item includes a line-art icon inside a rounded square, a title, and a short descriptive subtitle.",919,933,"Features Dropdown Menu from Neon","component",[50],{"id":51,"title":52,"slug":53},290,"Flyout menu","flyout-menu",{"slug":30,"title":29,"logo":32,"categories":55},[],{"uuid":57,"title":58,"description":59,"canonical_path":4,"image":60,"width":61,"height":62,"image_alt":63,"kind":48,"categories":64,"app":69},"97d5cbec-cb08-4ee2-96cf-c78b95f699bd","Hero Section","A dark-themed hero section featuring a prominent headline, subheadline, primary CTA button, and a two-column feature grid with abstract illustrations.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faf5f9923-6dcb-42f4-8f30-eef124806576.png",3280,2677,"Hero Section from Neon",[65],{"id":66,"title":67,"slug":68},197,"Hero section","hero-section",{"slug":30,"title":29,"logo":32,"categories":70},[],{"uuid":72,"title":73,"description":74,"canonical_path":4,"image":75,"width":76,"height":77,"image_alt":78,"kind":48,"categories":79,"app":84},"f2dd1ffa-52b6-4584-beb8-6f2f39dfea6c","Theme selector","A radio group presenting three visual theme options: System, Light, and Dark. Each option includes a stylized thumbnail preview of the interface and a radio button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F837c419a-0978-451c-921e-6fbcc6a74a77.png",1556,643,"Theme selector from Neon",[80],{"id":81,"title":82,"slug":83},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":85},[],{"uuid":87,"title":73,"description":88,"canonical_path":4,"image":89,"width":76,"height":77,"image_alt":78,"kind":48,"categories":90,"app":92},"7b6c6d12-e16f-4f30-b80d-278603678ce6","A radio group for selecting the UI theme, featuring visual previews for System, Light, and Dark modes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F430b36cf-fcfb-4da2-8c55-2be0dfc55058.png",[91],{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":93},[],{"uuid":95,"title":96,"description":97,"canonical_path":4,"image":98,"width":99,"height":100,"image_alt":101,"kind":48,"categories":102,"app":107},"085b6862-a48e-441c-bd2f-fc3dca41ca15","Database Table View","A data table displaying database records with a toolbar for filtering, column management, adding records, and pagination.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F320ba565-53ce-49b2-b52d-dfc3fb7c2463.png",2282,1809,"Database Table View from Neon",[103],{"id":104,"title":105,"slug":106},248,"Table","table-2",{"slug":30,"title":29,"logo":32,"categories":108},[],{"uuid":110,"title":111,"description":112,"canonical_path":4,"image":113,"width":114,"height":115,"image_alt":116,"kind":48,"categories":117,"app":122},"7ba015a6-d9e1-44dd-aa01-d4cad4bf9548","Usage progress bar","A progress bar showing compute usage against a monthly limit, accompanied by a title, detailed description, and a numeric usage ratio.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4b473da5-93c7-4687-93c4-215ff933cc37.png",1808,520,"Usage progress bar from Neon",[118],{"id":119,"title":120,"slug":121},213,"Progress indicator","progress-indicator",{"slug":30,"title":29,"logo":32,"categories":123},[],{"uuid":125,"title":126,"description":127,"canonical_path":4,"image":128,"width":114,"height":129,"image_alt":130,"kind":48,"categories":131,"app":133},"8b83c79d-1400-4b62-8dfc-9ca44a4eb532","Usage progress indicator","A progress indicator showing resource usage, specifically database branches, with an alert indicating the allowance has been exceeded.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F64e416a8-3e07-4b84-a131-6323f8bf00e3.png",600,"Usage progress indicator from Neon",[132],{"id":119,"title":120,"slug":121},{"slug":30,"title":29,"logo":32,"categories":134},[],{"uuid":136,"title":137,"description":138,"canonical_path":4,"image":139,"width":140,"height":141,"image_alt":142,"kind":48,"categories":143,"app":148},"4831b45f-8bbb-46a8-8030-e6790dc1fa67","History retention slider","A slider control for selecting a history retention period, with a label showing the current selection and a button to set a custom value.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8f0795de-d243-4b29-b03b-e09d9a66152c.png",1169,488,"History retention slider from Neon",[144],{"id":145,"title":146,"slug":147},223,"Slider","slider",{"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":48,"categories":158,"app":160},"34e882a0-bacc-4001-bf83-2845789850b8","Neon UI component","User account dropdown menu","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F603be309-d89f-4312-ac05-4a3328cfd4b6.png",722,670,"UI component from Neon",[159],{"id":81,"title":82,"slug":83},{"slug":30,"title":29,"logo":32,"categories":161},[],{"uuid":163,"title":164,"description":165,"canonical_path":4,"image":166,"width":167,"height":168,"image_alt":169,"kind":48,"categories":170,"app":175},"464080dc-01c6-498f-b1b6-247e15a1da36","Upgrade prompt card","A card displaying a list of features available on a paid plan, with a link to upgrade.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8f4a0bb9-bbb5-4c6e-b80b-e2a1927d114e.png",992,540,"Upgrade prompt card from Neon",[171],{"id":172,"title":173,"slug":174},255,"Upgrade your plan","upgrade-your-plan",{"slug":30,"title":29,"logo":32,"categories":176},[],{"uuid":178,"title":179,"description":180,"canonical_path":4,"image":181,"width":182,"height":183,"image_alt":184,"kind":48,"categories":185,"app":190},"385da2b2-0321-4139-97c4-8530ac31fdf7","RAM Usage Chart","A line chart displaying RAM usage over time, with a tooltip showing specific allocated and used values at a selected timestamp.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb2f6f592-f159-43fa-bdb9-755680264a34.png",970,710,"RAM Usage Chart from Neon",[186],{"id":187,"title":188,"slug":189},186,"Charts","charts",{"slug":30,"title":29,"logo":32,"categories":191},[],{"uuid":193,"title":164,"description":194,"canonical_path":4,"image":195,"width":196,"height":197,"image_alt":169,"kind":48,"categories":198,"app":200},"223c21c9-2e3d-4cae-8ea3-974b8367ab85","A card listing the features of a paid plan, with an outline button to upgrade.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F85ba33b1-e07b-4248-88b6-bb1d7859d75d.png",628,844,[199],{"id":172,"title":173,"slug":174},{"slug":30,"title":29,"logo":32,"categories":201},[],[],[204,207,210,213,216,218,222,226,230],{"label":205,"to":206},"Neon product screens","\u002Fexamples\u002Fapps\u002Fneon\u002Fscreens",{"label":208,"to":209},"Neon marketing pages","\u002Fexamples\u002Fapps\u002Fneon\u002Fmarketing",{"label":211,"to":212},"Neon user flows","\u002Fexamples\u002Fapps\u002Fneon\u002Fflows",{"label":214,"to":215},"Developer Tools app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fdeveloper-tools",{"label":217,"to":18},"All SaaS app examples",{"label":219,"to":220,"description":221},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":223,"to":224,"description":225},"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":227,"to":228,"description":229},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":231,"to":232,"description":233},"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":235,"updated_at":236},"2024-06-06T18:37:31.000Z","2026-09-26T12:10:07.000Z"]