Threads UI components examples

Threads

A descriptive text block explaining keyboard shortcut behavior for sending messages. It includes visual keyboard key indicators (Kbd) embedded within the sentence.

• Tips

Threads

Two side-by-side cards for selecting a theme. The left card represents light mode and the right card represents dark mode. Each card contains an avatar, a title, a subtitle, and a radio button.

• Theme settings

Threads

A radio group for configuring the default thread share link setting, with three mutually exclusive options.

• Checkbox & radio

Threads

A pill-shaped container holding an add-user icon button and a user avatar with an online status indicator.

• Avatar

Threads

A wide, light gray button with a user-plus icon and the text 'Add channel member'.

• Button

Threads

A horizontal row of rounded square color swatches for selecting a theme. One swatch is selected, indicated by a checkmark. An add image button is at the end of the row.

• Color picker

Threads

A toggle switch to enable or disable audio-only mode, featuring a speaker icon and text label.

• Toggle/Switch

Threads

A dark, pill-shaped toast notification confirming that a link has been copied. It features a purple link icon on the left and a close button on the right.

• Notification Toast

Threads

A button with an icon, text label, and a keyboard shortcut indicator.

• Button

Threads

A white pill-shaped button with a purple clock icon, the text 'Do later', and a keyboard shortcut hint 'F'.

• Button

Threads

A horizontal tab navigation bar with a search input on the right. The tabs filter a list of users by role or status, such as Members, Guests, and Invited.

• Tabs

Threads

A vertical sidebar navigation menu featuring a workspace switcher, a primary compose button, and collapsible sections for core views, channels, direct chats, and apps. It includes unread notification badges.

• Vertical navigation