---
title: "Components"
description: "Every component in the registry, in React, Vue and plain HTML, grouped the way the sidebar groups them."
sidebar:
  hidden: true
---

Every component ships three times over — as plain HTML and CSS, as a React
file and as a Vue single file component — and each one has a page with a live
example, the files it writes and the dependencies it needs.

## Actions

- [Button](/docs/components/button): Displays a Discord-styled button with brand, secondary, success, danger, link and icon variants.
- [Dropdown Menu](/docs/components/dropdown): A floating menu panel with icon, label and description items that highlight in brand color.
- [Context Menu](/docs/components/context-menu): A floating right-click style menu with items, keyboard shortcuts, dividers and a danger variant.
- [Keyboard Shortcut Tag](/docs/components/kbd-tag): A small monospace tag for displaying keyboard shortcuts.
- [Tabs](/docs/components/tabs): A pill-style tab list that switches the active tab on click.

## Feedback

- [Badge](/docs/components/badge): A small pill used to label status, counts or categories.
- [Toast](/docs/components/toast): A transient notification with a status icon that auto-dismisses after a timeout or when closed.
- [Modal](/docs/components/modal): A centered dialog over a dimmed overlay that closes on Escape, overlay click or an explicit close control.
- [Tooltip](/docs/components/tooltip): A small floating label that appears above an element on hover or focus.
- [Progress Bar](/docs/components/progress): A gradient progress bar for boosts, uploads and other long-running tasks.
- [Cooldown Bar](/docs/components/cooldown-bar): A slim progress bar with a label and monospace countdown for command cooldowns.
- [Skeleton Loader](/docs/components/skeleton): A shimmering placeholder shown while content is loading.
- [Empty State](/docs/components/empty-state): A centered placeholder with an icon, title, and hint shown when a list or view has no content.
- [Pagination](/docs/components/pagination): Numbered page buttons with previous/next controls, plus a divider-style load-more row.

## Identity & presence

- [Avatar](/docs/components/avatar): A circular user avatar with image support and initials fallback in three sizes.
- [Status Indicator](/docs/components/status-indicator): A presence dot anchored to an avatar, with online, idle, do-not-disturb, offline and streaming states.
- [Member List](/docs/components/member-list): A server member sidebar: role sections, presence, coloured names and APP tags.
- [Role Tag](/docs/components/role-tag): A compact bordered tag with a coloured dot for displaying a member's role.
- [Voice Channel Row](/docs/components/voice-channel): A sidebar voice channel row with a collapsible header and the list of connected members.
- [Server Banner](/docs/components/server-banner): Invite-style card with a server icon, name, live member counts and a join button.
- [Stage Banner](/docs/components/stage-banner): A full-width announcement strip with a status dot, optional action button and dismiss control.
- [Typing Indicator](/docs/components/typing-indicator): Three bouncing dots with a label that signals someone is typing.

## Messaging

- [Chat](/docs/components/chat): The channel shell: a scrolling message log with the composer pinned below it.
- [Message List](/docs/components/message-list): The polite live region that logs grouped messages in a channel.
- [Message Composer](/docs/components/message-composer): The channel input bar: attachment control, text field with combobox hooks, and send.
- [Embed](/docs/components/embed): A Discord-inspired rich message embed with an accent bar, author, title, description, fields, footer and timestamp.
- [Message Group](/docs/components/message-group): A grouped chat message with author, timestamp, reply preview, reactions and an ephemeral state.
- [Invite](/docs/components/invite): The server invite card a link unfurls into inside a message.
- [Reaction Pill](/docs/components/reaction): A toggleable emoji reaction pill, plus the group that rows them under a message.
- [Reply Preview](/docs/components/reply-preview): A compact "replying to" bar showing the author, a truncated excerpt, or the slash command that was used.
- [Poll](/docs/components/poll): A question, its answers, and the share of the vote behind each one.
- [System Message](/docs/components/system-message): The lines a channel writes about itself — joins, boosts, pins — with no author and no avatar.
- [Thread Preview](/docs/components/thread-preview): The thread hanging off a message: its name, its reply count and the last thing said.
- [Attachment Card](/docs/components/attachment): File card showing a type icon, file name, size and a download action.
- [Slash Command](/docs/components/slash-command): An inline /command with its subcommand path and typed options, including the focused one.
- [Slash Command Suggestions](/docs/components/slash-command-suggestions): The command picker that opens above the composer, with an app rail, grouped options and a matched-command preview.
- [Divider](/docs/components/divider): A horizontal rule with an optional centered label, spacing steps and a line-less mode.
- [Channel Header](/docs/components/channel-header): The bar above the message list, with the channel name, topic and channel actions.
- [Channel Topic Bar](/docs/components/channel-topic): A header bar showing the channel name and a truncating topic description.
- [Channel Welcome](/docs/components/channel-welcome): The header that opens a channel, shown above its very first message.
- [Channel Info](/docs/components/channel-info): The channel detail panel that covers a channel on narrow screens.
- [Notification Badge](/docs/components/notif-badge): A small count badge or unread dot for signalling new activity on avatars and channels.
- [User Profile Popout](/docs/components/user-profile): Floating profile card with a banner, overlapping avatar, bio section and role tags.

## Message components

- [Action Row](/docs/components/action-row): The row of buttons and selects attached under a message.
- [V2 Container](/docs/components/v2-container): The Components V2 block that groups text, separators and action rows behind one accent bar.
- [Section](/docs/components/section): A block of text with one accessory beside it — a thumbnail, or a button.
- [Media Gallery](/docs/components/media-gallery): One to ten images in a mosaic, laid out by how many there are.
- [Entity Select](/docs/components/entity-select): The picker for a server's own members, roles and channels, with chips when more than one may be chosen.
- [File Upload](/docs/components/file-upload): A drop zone that also opens a file picker from the keyboard.
- [Checkbox Group](/docs/components/checkbox-group): Several answers out of a visible list, each with an optional description.

## Forms & data

- [Form Fields](/docs/components/form-fields): Inputs, textareas, selects, labels, helper text, switches and checkboxes styled for the newt/ui dark theme.
- [Radio](/docs/components/radio): One choice out of a short, visible list, with the ring and dot the client's settings panels use.
- [Token Field](/docs/components/token-field): A read-only, masked monospace input with reveal and copy-to-clipboard actions for secrets such as bot tokens.
- [Select Menu](/docs/components/select-menu): A Discord-inspired string select: combobox trigger, keyboard-driven listbox and a portalled panel.
- [Card](/docs/components/card): A bordered, elevated panel for grouping related content.
- [Permission Row](/docs/components/permission): A settings row with a deny / inherit / allow tri-state toggle.
- [Event Timeline](/docs/components/timeline): A vertical event log with connected status dots, titles and metadata.
- [Bot Command Card](/docs/components/bot-command-card): A card documenting a slash command, its owning bot and its typed options.

## Formatting

- [Typeset](/docs/components/typeset): Styles rendered markdown with three variables — size, leading and flow — over the --newt-* tokens.
- [Mention Chip](/docs/components/mention): An inline chip for user, channel, role and app mentions, with an optional avatar.
- [Custom Emoji](/docs/components/custom-emoji): An uploaded emoji that sits on the text baseline and reads as :name:.
- [Timestamp](/docs/components/timestamp): One instant, written in the reader's own locale and time zone.
- [Spoiler](/docs/components/spoiler): Inline text hidden behind a dark block until the reader clicks to reveal it.
- [Inline Code](/docs/components/inline-code): A monospace pill for code inside a line of message text.
- [Code Block](/docs/components/code-block): A monospace preformatted block that colours its own source from a language name.

## Utilities

- [Scrollbar Utility](/docs/components/scrollbar): Discord-styled scrollbars for any scrollable container, with an optional keyboard-focusable viewport.
- [App Launcher](/docs/components/app-launcher): The Apps popout, with search, a recents strip and the apps installed in a server.
- [Direction](/docs/components/direction): Sets the writing direction for a subtree and exposes it to the components that need to know which way is forward.

## Blocks

- [Chat window](/docs/components/chat-window): A whole channel view: header, scrolling message list and composer, composed from the registry.
- [Server sidebar](/docs/components/server-sidebar): The column beside a channel: the server banner, the voice channel and the grouped member list.
- [Command panel](/docs/components/command-panel): A command browser with a selectable suggestion list and a detailed option card.