Components
Every component in the registry, in React, Vue and plain HTML, grouped the way the sidebar groups them.
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
Displays a Discord-styled button with brand, secondary, success, danger, link and icon variants.
Dropdown Menu
A floating menu panel with icon, label and description items that highlight in brand color.
Context Menu
A floating right-click style menu with items, keyboard shortcuts, dividers and a danger variant.
Keyboard Shortcut Tag
A small monospace tag for displaying keyboard shortcuts.
Tabs
A pill-style tab list that switches the active tab on click.
Feedback
Badge
A small pill used to label status, counts or categories.
Toast
A transient notification with a status icon that auto-dismisses after a timeout or when closed.
Modal
A centered dialog over a dimmed overlay that closes on Escape, overlay click or an explicit close control.
Tooltip
A small floating label that appears above an element on hover or focus.
Progress Bar
A gradient progress bar for boosts, uploads and other long-running tasks.
Cooldown Bar
A slim progress bar with a label and monospace countdown for command cooldowns.
Skeleton Loader
A shimmering placeholder shown while content is loading.
Empty State
A centered placeholder with an icon, title, and hint shown when a list or view has no content.
Pagination
Numbered page buttons with previous/next controls, plus a divider-style load-more row.
Identity & presence
Avatar
A circular user avatar with image support and initials fallback in three sizes.
Status Indicator
A presence dot anchored to an avatar, with online, idle, do-not-disturb, offline and streaming states.
Member List
A server member sidebar: role sections, presence, coloured names and APP tags.
Role Tag
A compact bordered tag with a coloured dot for displaying a member's role.
Voice Channel Row
A sidebar voice channel row with a collapsible header and the list of connected members.
Server Banner
Invite-style card with a server icon, name, live member counts and a join button.
Stage Banner
A full-width announcement strip with a status dot, optional action button and dismiss control.
Typing Indicator
Three bouncing dots with a label that signals someone is typing.
Messaging
Chat
The channel shell: a scrolling message log with the composer pinned below it.
Message List
The polite live region that logs grouped messages in a channel.
Message Composer
The channel input bar: attachment control, text field with combobox hooks, and send.
Embed
A Discord-inspired rich message embed with an accent bar, author, title, description, fields, footer and timestamp.
Message Group
A grouped chat message with author, timestamp, reply preview, reactions and an ephemeral state.
Invite
The server invite card a link unfurls into inside a message.
Reaction Pill
A toggleable emoji reaction pill, plus the group that rows them under a message.
Reply Preview
A compact "replying to" bar showing the author, a truncated excerpt, or the slash command that was used.
Poll
A question, its answers, and the share of the vote behind each one.
System Message
The lines a channel writes about itself — joins, boosts, pins — with no author and no avatar.
Thread Preview
The thread hanging off a message: its name, its reply count and the last thing said.
Attachment Card
File card showing a type icon, file name, size and a download action.
Slash Command
An inline /command with its subcommand path and typed options, including the focused one.
Slash Command Suggestions
The command picker that opens above the composer, with an app rail, grouped options and a matched-command preview.
Divider
A horizontal rule with an optional centered label, spacing steps and a line-less mode.
Channel Header
The bar above the message list, with the channel name, topic and channel actions.
Channel Topic Bar
A header bar showing the channel name and a truncating topic description.
Channel Welcome
The header that opens a channel, shown above its very first message.
Channel Info
The channel detail panel that covers a channel on narrow screens.
Notification Badge
A small count badge or unread dot for signalling new activity on avatars and channels.
User Profile Popout
Floating profile card with a banner, overlapping avatar, bio section and role tags.
Message components
Action Row
The row of buttons and selects attached under a message.
V2 Container
The Components V2 block that groups text, separators and action rows behind one accent bar.
Section
A block of text with one accessory beside it — a thumbnail, or a button.
Media Gallery
One to ten images in a mosaic, laid out by how many there are.
Entity Select
The picker for a server's own members, roles and channels, with chips when more than one may be chosen.
File Upload
A drop zone that also opens a file picker from the keyboard.
Checkbox Group
Several answers out of a visible list, each with an optional description.
Forms & data
Form Fields
Inputs, textareas, selects, labels, helper text, switches and checkboxes styled for the newt/ui dark theme.
Radio
One choice out of a short, visible list, with the ring and dot the client's settings panels use.
Token Field
A read-only, masked monospace input with reveal and copy-to-clipboard actions for secrets such as bot tokens.
Select Menu
A Discord-inspired string select: combobox trigger, keyboard-driven listbox and a portalled panel.
Card
A bordered, elevated panel for grouping related content.
Permission Row
A settings row with a deny / inherit / allow tri-state toggle.
Event Timeline
A vertical event log with connected status dots, titles and metadata.
Bot Command Card
A card documenting a slash command, its owning bot and its typed options.
Formatting
Typeset
Styles rendered markdown with three variables — size, leading and flow — over the --newt-* tokens.
Mention Chip
An inline chip for user, channel, role and app mentions, with an optional avatar.
Custom Emoji
An uploaded emoji that sits on the text baseline and reads as :name:.
Timestamp
One instant, written in the reader's own locale and time zone.
Spoiler
Inline text hidden behind a dark block until the reader clicks to reveal it.
Inline Code
A monospace pill for code inside a line of message text.
Code Block
A monospace preformatted block that colours its own source from a language name.
Utilities
Scrollbar Utility
Discord-styled scrollbars for any scrollable container, with an optional keyboard-focusable viewport.
App Launcher
The Apps popout, with search, a recents strip and the apps installed in a server.
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
A whole channel view: header, scrolling message list and composer, composed from the registry.
Server sidebar
The column beside a channel: the server banner, the voice channel and the grouped member list.
Command panel
A command browser with a selectable suggestion list and a detailed option card.