Discord UI components examples

Discord

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.

• Slider

Discord

A slider component used to adjust input sensitivity, currently displaying an error message indicating no input devices are enabled.

• Slider

Discord

A slider control for adjusting color saturation, featuring a title, descriptive text, and a track with percentage markers from 0% to 100%.

• Slider

Discord

• Theme settings

Discord

• Theme settings

Discord

A small, pill-shaped badge indicating a beta feature.

• Badge

Discord

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.

• Alert

Discord

An inline informational alert box with an icon, a message, and a text link.

• Alert

Discord

A read-only input field displaying a truncated JSON API URL with an inline Copy button.

• Click to copy

Discord

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.

• Color picker

Discord

A horizontal tab navigation component with three options. The first tab is currently selected, indicated by a colored underline and brighter text.

• Tabs

Discord

• Vertical navigation