[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fsuper\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":214,"links":215,"dates":231},"\u002Fexamples\u002Fapps\u002Fsuper\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Super UI components examples - Nicelydone","Browse Super UI component design examples. Preview individual interface elements and explore related component categories. Create websites with Notion","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6ab5e4ec-bf37-4149-9751-dac81ff59505.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},"Super design examples","\u002Fexamples\u002Fapps\u002Fsuper",{"label":23,"to":4},"Super 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},"Super","super","Create websites with Notion","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsuper-3a684df5.png","https:\u002F\u002Fsuper.so\u002F","super_",[36,40],{"id":37,"title":38,"slug":39},96,"No code","no-code",{"id":41,"title":42,"slug":43},7,"Web Development","web-development",[45,60,75,89,103,117,132,143,158,173,187,200],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"ef4fbe87-a751-4b66-93c8-3645feecee49","Search input","A standard search input field with a magnifying glass icon and placeholder text.",661,220,"Search input from Super","component",[54],{"id":55,"title":56,"slug":57},295,"Input search","input-search",{"slug":30,"title":29,"logo":32,"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},"9a97e08c-d0e4-4717-901a-fb8b08619e45","Site card","A card displaying a preview of a website, its title, URL, status, and actions to edit or manage it.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4b8c1d9a-8892-456f-b9d5-aaa1c2887e24.png",1332,982,"Site card from Super",[69],{"id":70,"title":71,"slug":72},174,"Card","card",{"slug":30,"title":29,"logo":32,"categories":74},[],{"uuid":76,"title":77,"description":78,"canonical_path":4,"image":79,"width":80,"height":50,"image_alt":81,"kind":52,"categories":82,"app":87},"e8bd6749-95ac-41dd-b6e0-97aed87abba8","View toggle","A segmented control to switch between grid and list views. The grid view is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F426d23f1-82ec-47ed-9e26-b93185021359.png",363,"View toggle from Super",[83],{"id":84,"title":85,"slug":86},218,"Segmented control","segmented-control",{"slug":30,"title":29,"logo":32,"categories":88},[],{"uuid":90,"title":91,"description":92,"canonical_path":4,"image":93,"width":94,"height":50,"image_alt":95,"kind":52,"categories":96,"app":101},"cafb53cc-9599-4089-aea8-e706211c3cbc","Super UI component","A loading modal with a progress indicator.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbed74645-0678-4706-acb7-16ddb5f60b33.png",350,"UI component from Super",[97],{"id":98,"title":99,"slug":100},175,"Button","button",{"slug":30,"title":29,"logo":32,"categories":102},[],{"uuid":104,"title":105,"description":106,"canonical_path":4,"image":107,"width":108,"height":66,"image_alt":109,"kind":52,"categories":110,"app":115},"1946c093-3313-4627-89d0-484f9fe60b6e","Site management card with dropdown","A card displaying a site preview, title, URL, and status badge, accompanied by an open dropdown menu offering various site management actions.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F143ca25a-37ae-481e-8261-be5ce089a3e3.png",1487,"Site management card with dropdown from Super",[111],{"id":112,"title":113,"slug":114},190,"Dropdown menu","dropdown-menu",{"slug":30,"title":29,"logo":32,"categories":116},[],{"uuid":118,"title":119,"description":120,"canonical_path":4,"image":121,"width":122,"height":123,"image_alt":124,"kind":52,"categories":125,"app":130},"b7835318-e157-456f-bef3-e852a3625a12","Paid status badge","A pill-shaped badge indicating a 'Paid' status, featuring green text and a checkmark icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fbc671db9-e7f7-4b47-b39c-35ffa344eaf9.png",245,176,"Paid status badge from Super",[126],{"id":127,"title":128,"slug":129},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":131},[],{"uuid":133,"title":134,"description":135,"canonical_path":4,"image":136,"width":137,"height":123,"image_alt":138,"kind":52,"categories":139,"app":141},"867fe950-22de-4d79-a91d-b89d27badc27","Idle status badge","A pill-shaped badge indicating an 'Idle' status, featuring a text label and a small dot icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2a1d3a37-4cd5-4b7d-9c61-2a9242ceb241.png",229,"Idle status badge from Super",[140],{"id":127,"title":128,"slug":129},{"slug":30,"title":29,"logo":32,"categories":142},[],{"uuid":144,"title":145,"description":146,"canonical_path":4,"image":147,"width":148,"height":149,"image_alt":150,"kind":52,"categories":151,"app":156},"75e51c2d-5389-451c-8c8f-e66a40f8494d","Warning Alert","An inline warning alert box with an icon and text explaining the consequences of changing a billing cycle.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F9294ce4a-82d3-468b-8b2e-103341a37456.png",976,228,"Warning Alert from Super",[152],{"id":153,"title":154,"slug":155},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":157},[],{"uuid":159,"title":160,"description":161,"canonical_path":4,"image":162,"width":163,"height":164,"image_alt":165,"kind":52,"categories":166,"app":171},"17cc16ee-95c6-48f9-9343-a4395dd64c41","Typography Size Sliders","A settings section containing multiple sliders to adjust typography sizes. It includes a title, a brief explanatory description, and five individual sliders for Base, Title, Headings, Quote, and Quote (Large) sizes, each with a corresponding numeric value display.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa938c049-084b-4714-b89a-f8f0c9d8c28e.png",814,767,"Typography Size Sliders from Super",[167],{"id":168,"title":169,"slug":170},223,"Slider","slider",{"slug":30,"title":29,"logo":32,"categories":172},[],{"uuid":174,"title":175,"description":176,"canonical_path":4,"image":177,"width":178,"height":50,"image_alt":179,"kind":52,"categories":180,"app":185},"60678501-9557-40e1-9358-a2a28ee075e8","Confirmation button group","A row of three buttons for handling unsaved changes: Cancel, Discard, and Save. The Save button is highlighted as the primary action.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcda17b56-09c5-41d7-94da-8993dffbb6d8.png",832,"Confirmation button group from Super",[181],{"id":182,"title":183,"slug":184},277,"Button group","button-group",{"slug":30,"title":29,"logo":32,"categories":186},[],{"uuid":188,"title":91,"description":189,"canonical_path":4,"image":190,"width":191,"height":192,"image_alt":95,"kind":52,"categories":193,"app":198},"2bf043d7-c175-4911-b1ca-308ab26d0136","A color picker modal","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F58ef5740-4a42-4b4d-a927-354e4b179edd.png",906,985,[194],{"id":195,"title":196,"slug":197},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":199},[],{"uuid":201,"title":202,"description":203,"canonical_path":4,"image":204,"width":191,"height":205,"image_alt":206,"kind":52,"categories":207,"app":212},"ccf3ff33-64b9-4254-93d9-bc1ae8e9a0ee","Color palette dropdown","An open dropdown menu displaying a list of color palette options. The 'Default' option is currently selected, indicated by an orange checkmark.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6bae3b7a-ca9a-4fe4-99a3-cef7d59395fa.png",1024,"Color palette dropdown from Super",[208],{"id":209,"title":210,"slug":211},204,"Input select","input-select",{"slug":30,"title":29,"logo":32,"categories":213},[],[],[216,219,222,225,228],{"label":217,"to":218},"Super product screens","\u002Fexamples\u002Fapps\u002Fsuper\u002Fscreens",{"label":220,"to":221},"Super marketing pages","\u002Fexamples\u002Fapps\u002Fsuper\u002Fmarketing",{"label":223,"to":224},"Super user flows","\u002Fexamples\u002Fapps\u002Fsuper\u002Fflows",{"label":226,"to":227},"No code app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fno-code",{"label":229,"to":230},"Web Development app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fweb-development",{"published_at":232,"updated_at":233},"2023-05-22T19:12:13.000Z","2026-09-13T13:02:39.000Z"]