[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fdiscord\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":206,"links":207,"dates":241},"\u002Fexamples\u002Fapps\u002Fdiscord\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Discord UI components examples - Nicelydone","Browse Discord UI component design examples. Preview individual interface elements and explore related component categories. Your place to talk and hang out","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F46135c3a-9982-4b23-93f4-f96ec24f6a16.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},"Discord design examples","\u002Fexamples\u002Fapps\u002Fdiscord",{"label":23,"to":4},"Discord 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},"Discord","discord","Your place to talk and hang out","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdiscord-5c23ee2c.png","https:\u002F\u002Fdiscord.com","discordapp",[36,40],{"id":37,"title":38,"slug":39},1,"Communities","communities",{"id":41,"title":42,"slug":43},42,"Messaging","messaging",[45,60,71,83,97,107,122,137,148,163,178,193],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"46135c3a-9982-4b23-93f4-f96ec24f6a16","Audio settings panel","A settings panel for adjusting input and output volume using sliders, and a mic test section with a button and a visual audio level indicator.",1576,614,"Audio settings panel from Discord","component",[54],{"id":55,"title":56,"slug":57},223,"Slider","slider",{"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":69},"79db9e4d-3cb3-49b5-b809-5b2b3349ccb5","Input Sensitivity Slider","A slider component used to adjust input sensitivity, currently displaying an error message indicating no input devices are enabled.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F79db9e4d-3cb3-49b5-b809-5b2b3349ccb5.png",492,"Input Sensitivity Slider from Discord",[68],{"id":55,"title":56,"slug":57},{"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":52,"categories":79,"app":81},"2e66ae2f-4b2f-4dd3-8369-0831a99d96e0","Saturation slider","A slider control for adjusting color saturation, featuring a title, descriptive text, and a track with percentage markers from 0% to 100%.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2e66ae2f-4b2f-4dd3-8369-0831a99d96e0.png",1592,487,"Saturation slider from Discord",[80],{"id":55,"title":56,"slug":57},{"slug":30,"title":29,"logo":32,"categories":82},[],{"uuid":84,"title":85,"description":86,"canonical_path":4,"image":87,"width":49,"height":88,"image_alt":89,"kind":52,"categories":90,"app":95},"c2a28c8c-e6b0-4e92-8c33-1780e7b338a4","Discord UI component","A modal for appearance settings with a dark theme.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc2a28c8c-e6b0-4e92-8c33-1780e7b338a4.png",1238,"UI component from Discord",[91],{"id":92,"title":93,"slug":94},256,"Theme settings","theme-settings",{"slug":30,"title":29,"logo":32,"categories":96},[],{"uuid":98,"title":85,"description":99,"canonical_path":4,"image":100,"width":101,"height":102,"image_alt":89,"kind":52,"categories":103,"app":105},"46505b84-bd67-4246-9d21-ceba2f86fe1a","A modal to preview profile themes.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F46505b84-bd67-4246-9d21-ceba2f86fe1a.png",1440,446,[104],{"id":92,"title":93,"slug":94},{"slug":30,"title":29,"logo":32,"categories":106},[],{"uuid":108,"title":109,"description":110,"canonical_path":4,"image":111,"width":112,"height":113,"image_alt":114,"kind":52,"categories":115,"app":120},"d6ac2bd4-3399-4a8e-bb98-751a801b1c5a","Beta badge","A small, pill-shaped badge indicating a beta feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd6ac2bd4-3399-4a8e-bb98-751a801b1c5a.png",212,160,"Beta badge from Discord",[116],{"id":117,"title":118,"slug":119},260,"Badge","badge",{"slug":30,"title":29,"logo":32,"categories":121},[],{"uuid":123,"title":124,"description":125,"canonical_path":4,"image":126,"width":127,"height":128,"image_alt":129,"kind":52,"categories":130,"app":135},"c39d0e94-f3f3-48f0-b71d-65c9368b5004","Geographic restriction alert","A warning alert banner informing the user that server monetization is not supported in their location, with a call to action to sign up for updates.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc39d0e94-f3f3-48f0-b71d-65c9368b5004.png",1376,468,"Geographic restriction alert from Discord",[131],{"id":132,"title":133,"slug":134},167,"Alert","alert",{"slug":30,"title":29,"logo":32,"categories":136},[],{"uuid":138,"title":139,"description":140,"canonical_path":4,"image":141,"width":49,"height":142,"image_alt":143,"kind":52,"categories":144,"app":146},"82a5b32b-a5ef-4da1-a798-52b5c31734cc","Information Alert","An inline informational alert box with an icon, a message, and a text link.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F82a5b32b-a5ef-4da1-a798-52b5c31734cc.png",340,"Information Alert from Discord",[145],{"id":132,"title":133,"slug":134},{"slug":30,"title":29,"logo":32,"categories":147},[],{"uuid":149,"title":150,"description":151,"canonical_path":4,"image":152,"width":153,"height":154,"image_alt":155,"kind":52,"categories":156,"app":161},"b86d29f1-e69f-4b26-bb78-4a945b80622f","Copy API URL field","A read-only input field displaying a truncated JSON API URL with an inline Copy button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb86d29f1-e69f-4b26-bb78-4a945b80622f.png",768,250,"Copy API URL field from Discord",[157],{"id":158,"title":159,"slug":160},241,"Click to copy","click-to-copy",{"slug":30,"title":29,"logo":32,"categories":162},[],{"uuid":164,"title":165,"description":166,"canonical_path":4,"image":167,"width":168,"height":169,"image_alt":170,"kind":52,"categories":171,"app":176},"8d54fabe-81f1-4865-9696-045a63291993","Role Color Picker","A color picker component for selecting a role color. It includes a label, helper text, a default color option with a checkmark, a custom color picker button with an eyedropper icon, and a grid of predefined color swatches.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8d54fabe-81f1-4865-9696-045a63291993.png",1012,322,"Role Color Picker from Discord",[172],{"id":173,"title":174,"slug":175},183,"Color picker","color-picker",{"slug":30,"title":29,"logo":32,"categories":177},[],{"uuid":179,"title":180,"description":181,"canonical_path":4,"image":182,"width":183,"height":184,"image_alt":185,"kind":52,"categories":186,"app":191},"6f1435df-c842-48d4-ba17-5c8a84d3163e","Settings Tabs","A horizontal tab navigation component with three options. The first tab is currently selected, indicated by a colored underline and brighter text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6f1435df-c842-48d4-ba17-5c8a84d3163e.png",832,197,"Settings Tabs from Discord",[187],{"id":188,"title":189,"slug":190},233,"Tabs","tabs",{"slug":30,"title":29,"logo":32,"categories":192},[],{"uuid":194,"title":85,"description":195,"canonical_path":4,"image":196,"width":197,"height":198,"image_alt":89,"kind":52,"categories":199,"app":204},"cf90fe04-ce60-4b0e-8150-6d5b98a19035","A modal displaying server roles.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fcf90fe04-ce60-4b0e-8150-6d5b98a19035.png",987,1812,[200],{"id":201,"title":202,"slug":203},209,"Vertical navigation","vertical-navigation",{"slug":30,"title":29,"logo":32,"categories":205},[],[],[208,211,214,217,220,223,225,229,233,237],{"label":209,"to":210},"Discord product screens","\u002Fexamples\u002Fapps\u002Fdiscord\u002Fscreens",{"label":212,"to":213},"Discord marketing pages","\u002Fexamples\u002Fapps\u002Fdiscord\u002Fmarketing",{"label":215,"to":216},"Discord user flows","\u002Fexamples\u002Fapps\u002Fdiscord\u002Fflows",{"label":218,"to":219},"Communities app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcommunities",{"label":221,"to":222},"Messaging app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmessaging",{"label":224,"to":18},"All SaaS app examples",{"label":226,"to":227,"description":228},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":230,"to":231,"description":232},"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":234,"to":235,"description":236},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":238,"to":239,"description":240},"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":242,"updated_at":243},"2023-01-18T13:05:14.000Z","2026-09-13T13:02:39.000Z"]