[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fsoundxyz\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":45,"showcases":216,"links":217,"dates":251},"\u002Fexamples\u002Fapps\u002Fsoundxyz\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"Sound.xyz UI components examples - Nicelydone","Browse Sound.xyz UI component design examples. Preview individual interface elements and explore related component categories. Discover new music and prove…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F437a38ea-11fc-4ef7-85cb-7d42036bcc65.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},"Sound.xyz design examples","\u002Fexamples\u002Fapps\u002Fsoundxyz",{"label":23,"to":4},"Sound.xyz UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse Sound.xyz UI component design examples. Preview individual interface elements and explore related component categories. Discover new music and prove you were there first",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"twitter_username":35,"categories":36},"Sound.xyz","soundxyz","Discover new music and prove you were there first","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fsoundxyz-8be2fe21.png","https:\u002F\u002Fwww.sound.xyz","soundxyz_",[37,41],{"id":38,"title":39,"slug":40},20,"Music","music",{"id":42,"title":43,"slug":44},95,"Blockchain","blockchain",[46,61,76,91,106,121,136,151,163,175,189,201],{"uuid":47,"title":48,"description":49,"canonical_path":4,"image":11,"width":50,"height":51,"image_alt":52,"kind":53,"categories":54,"app":59},"e33fa971-a36b-4eed-8ff0-f8349cacf9b1","Notification toggle","A settings row with a title, description containing a link, and a toggle switch to enable or disable artist updates.",947,220,"Notification toggle from Sound.xyz","component",[55],{"id":56,"title":57,"slug":58},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":60},[],{"uuid":62,"title":63,"description":64,"canonical_path":4,"image":65,"width":66,"height":67,"image_alt":68,"kind":53,"categories":69,"app":74},"4552ee17-a0a0-470c-bd40-f08e1b960c90","Nickname input with character count","A text input field for a user's nickname, featuring a character count and a circular progress indicator showing how close the input is to the maximum length.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F45ed88d7-a77e-4f4c-a015-f1de94560f54.png",1362,368,"Nickname input with character count from Sound.xyz",[70],{"id":71,"title":72,"slug":73},213,"Progress indicator","progress-indicator",{"slug":31,"title":30,"logo":33,"categories":75},[],{"uuid":77,"title":78,"description":79,"canonical_path":4,"image":80,"width":81,"height":82,"image_alt":83,"kind":53,"categories":84,"app":89},"8d5492ec-54a2-4f8e-8df4-6a1c02e1a0c5","Success Toast Notification","A dark-themed toast notification confirming a successful subscription and follow action, featuring a green checkmark icon and a close button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd4884392-719a-4fcd-85b1-469fcbeea307.png",971,313,"Success Toast Notification from Sound.xyz",[85],{"id":86,"title":87,"slug":88},247,"Notification Toast","notification-element",{"slug":31,"title":30,"logo":33,"categories":90},[],{"uuid":92,"title":93,"description":94,"canonical_path":4,"image":95,"width":96,"height":97,"image_alt":98,"kind":53,"categories":99,"app":104},"290d35c5-f115-40b4-854b-1bea8332c0eb","User profile dropdown menu","A dropdown menu displaying user profile information, wallet balance, and navigation links.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6894af03-8b0b-4b71-87c7-a0e27041993e.png",565,896,"User profile dropdown menu from Sound.xyz",[100],{"id":101,"title":102,"slug":103},190,"Dropdown menu","dropdown-menu",{"slug":31,"title":30,"logo":33,"categories":105},[],{"uuid":107,"title":108,"description":109,"canonical_path":4,"image":110,"width":111,"height":112,"image_alt":113,"kind":53,"categories":114,"app":119},"ea87db1d-9521-4978-a643-e0bbb664deb2","Search bar","A wide search input field with a magnifying glass icon and placeholder text.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F619436cd-a5db-4ec2-92b0-7bfbb70403e1.png",2474,336,"Search bar from Sound.xyz",[115],{"id":116,"title":117,"slug":118},295,"Input search","input-search",{"slug":31,"title":30,"logo":33,"categories":120},[],{"uuid":122,"title":123,"description":124,"canonical_path":4,"image":125,"width":126,"height":127,"image_alt":128,"kind":53,"categories":129,"app":134},"666a2c0a-e5c5-48ae-99e2-488ac97e8d63","Chart type tabs","A simple two-item tab navigation component switching between Viral and Top charts.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fadaef936-7a3c-4381-89e9-c9b66b918f44.png",779,210,"Chart type tabs from Sound.xyz",[130],{"id":131,"title":132,"slug":133},233,"Tabs","tabs",{"slug":31,"title":30,"logo":33,"categories":135},[],{"uuid":137,"title":138,"description":139,"canonical_path":4,"image":140,"width":141,"height":142,"image_alt":143,"kind":53,"categories":144,"app":149},"7a30453e-f872-4a2a-98f0-fa06cfbc9968","Track card","A card displaying a music track with its cover art, title, artist, mint count, and a prominent play button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fd8b01692-0212-4ebf-ab6a-5ae60f2964cf.png",678,865,"Track card from Sound.xyz",[145],{"id":146,"title":147,"slug":148},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":150},[],{"uuid":152,"title":153,"description":154,"canonical_path":4,"image":155,"width":156,"height":157,"image_alt":158,"kind":53,"categories":159,"app":161},"8c24f37d-5e35-4be6-9971-4e7086d13954","Music track card","A vertical card displaying a music track's cover art, artist name, and track title.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F36a67c4b-ab35-42a9-8754-7453486a2e5b.png",592,708,"Music track card from Sound.xyz",[160],{"id":146,"title":147,"slug":148},{"slug":31,"title":30,"logo":33,"categories":162},[],{"uuid":164,"title":165,"description":166,"canonical_path":4,"image":167,"width":168,"height":169,"image_alt":170,"kind":53,"categories":171,"app":173},"62bd27cd-1111-44d2-8871-d730eb62b22c","Genre Card","A square card displaying a music genre title and a representative image, used for browsing categories.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fde8c960c-fb52-4955-9515-647c2c3b1d34.png",509,458,"Genre Card from Sound.xyz",[172],{"id":146,"title":147,"slug":148},{"slug":31,"title":30,"logo":33,"categories":174},[],{"uuid":176,"title":177,"description":178,"canonical_path":4,"image":179,"width":180,"height":67,"image_alt":181,"kind":53,"categories":182,"app":187},"c04b0189-6e09-4efc-840a-81b823d02106","Audio Player Bar","A horizontal audio player bar featuring track artwork, title, artist, playback controls, a progress bar, and utility icons.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F19d47f72-69a3-44cd-9f85-c20b1a301538.png",3208,"Audio Player Bar from Sound.xyz",[183],{"id":184,"title":185,"slug":186},170,"Audio player","audio-player",{"slug":31,"title":30,"logo":33,"categories":188},[],{"uuid":190,"title":191,"description":192,"canonical_path":4,"image":193,"width":194,"height":195,"image_alt":196,"kind":53,"categories":197,"app":199},"869f5c9a-83c5-4571-bf0e-7663659297f1","Track actions dropdown","A dropdown menu triggered by a more options icon button, displaying actions for an audio track such as adding to a playlist or queue, and a disabled option to download audio.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa7cfd66d-af14-4981-9590-9a18776d39c3.png",599,550,"Track actions dropdown from Sound.xyz",[198],{"id":101,"title":102,"slug":103},{"slug":31,"title":30,"logo":33,"categories":200},[],{"uuid":202,"title":203,"description":204,"canonical_path":4,"image":205,"width":206,"height":207,"image_alt":208,"kind":53,"categories":209,"app":214},"a8dc6597-7941-418d-9100-c296effbdded","Artist Profile Header","A horizontal profile header displaying an artist's avatar, name with a verified badge, follower count, a notification bell icon button, and a primary Follow button.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F88438f66-36bb-4d2a-be15-93d594e2009d.png",765,208,"Artist Profile Header from Sound.xyz",[210],{"id":211,"title":212,"slug":213},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":215},[],[],[218,221,224,227,230,233,235,239,243,247],{"label":219,"to":220},"Sound.xyz product screens","\u002Fexamples\u002Fapps\u002Fsoundxyz\u002Fscreens",{"label":222,"to":223},"Sound.xyz marketing pages","\u002Fexamples\u002Fapps\u002Fsoundxyz\u002Fmarketing",{"label":225,"to":226},"Sound.xyz user flows","\u002Fexamples\u002Fapps\u002Fsoundxyz\u002Fflows",{"label":228,"to":229},"Music app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fmusic",{"label":231,"to":232},"Blockchain app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fblockchain",{"label":234,"to":18},"All SaaS app examples",{"label":236,"to":237,"description":238},"SaaS screen examples","\u002Fexamples\u002Fscreens","Browse real product interface screens grouped by reusable screen patterns and common product tasks.",{"label":240,"to":241,"description":242},"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":244,"to":245,"description":246},"SaaS UI component examples","\u002Fexamples\u002Fcomponents","Browse interface components extracted from real SaaS products and grouped by their visible role.",{"label":248,"to":249,"description":250},"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":252,"updated_at":253},"2023-09-25T09:31:21.000Z","2026-09-17T12:10:11.000Z"]