Sound.xyz UI components examples

Sound.xyz

A settings row with a title, description containing a link, and a toggle switch to enable or disable artist updates.

• Toggle/Switch

Sound.xyz

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.

• Progress indicator

Sound.xyz

A dark-themed toast notification confirming a successful subscription and follow action, featuring a green checkmark icon and a close button.

• Notification Toast

Sound.xyz

A dropdown menu displaying user profile information, wallet balance, and navigation links.

• Dropdown menu

Sound.xyz

A wide search input field with a magnifying glass icon and placeholder text.

• Input search

Sound.xyz

A simple two-item tab navigation component switching between Viral and Top charts.

• Tabs

Sound.xyz

A card displaying a music track with its cover art, title, artist, mint count, and a prominent play button.

• Card

Sound.xyz

A vertical card displaying a music track's cover art, artist name, and track title.

• Card

Sound.xyz

A square card displaying a music genre title and a representative image, used for browsing categories.

• Card

Sound.xyz

A horizontal audio player bar featuring track artwork, title, artist, playback controls, a progress bar, and utility icons.

• Audio player

Sound.xyz

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.

• Dropdown menu

Sound.xyz

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.

• Avatar