# newt/ui > Discord-inspired components for React and Vue Copy-paste components for React, Vue and plain HTML/CSS, built on the `--newt-*` design token layer. Install with `npx newtui@latest init`, then `npx newtui@latest add `; the React registry index is https://newtui.dev/r/index.json and the Vue one is https://newtui.dev/vue/r/index.json. newt/ui is Discord-inspired and independent: not affiliated with, endorsed by, or sponsored by Discord Inc. See the trademark notice at https://github.com/wolfstar-project/newt-ui/blob/main/DISCLAIMER.md. ## Get Started - [Introduction](https://newtui.dev/docs): A component library, a design token system and an agent guide for building Discord-inspired interfaces in React, Vue and plain HTML. - [Installation](https://newtui.dev/docs/installation): Three ways in: a preset from the builder, one CLI command, or the wiring for a project you already have. - [Presets](https://newtui.dev/docs/create): One code carries the five things a project actually varies, and the CLI knows how to read it. - [Typeset](https://newtui.dev/docs/typeset): Three controls — size, leading and flow — for every place the library renders markdown. - [components.json](https://newtui.dev/docs/components-json): The config newtui init writes: where your aliases point, which stylesheet holds the tokens, and which registry to read. - [Theming](https://newtui.dev/docs/theming): One layer of --newt-* custom properties drives every component in every flavour. Override a variable rather than a component. - [Dark mode](https://newtui.dev/docs/dark-mode): newt/ui is dark by default and ships an opt-in light surface set. Wiring a toggle is three lines of CSS and one attribute. - [RTL](https://newtui.dev/docs/rtl): Every component is written with logical properties, so a right-to-left interface is one attribute rather than a second stylesheet. - [CLI](https://newtui.dev/docs/cli): newtui — every command and flag, for React, Vue and the plain HTML/CSS build. - [JavaScript](https://newtui.dev/docs/javascript): newt/ui is written in TypeScript, but the CLI can write plain JavaScript into a project that does not use it. - [HTML & CSS](https://newtui.dev/docs/html-css): The canonical flavour: BEM class names and one token file, with no framework, no bundler and no build step. - [Using with AI](https://newtui.dev/docs/using-with-ai): A copy-paste registry suits an agent well: the component source is already in the repository it is editing, and every value it may reach for is a named token. - [MCP server](https://newtui.dev/docs/mcp): Give your editor's agent the registry: what exists, what it looks like, and the command that installs it. - [Skills](https://newtui.dev/docs/skills): Install the newt/ui skill and your coding agent knows the registry, the token system and the review checklist without being told. ## Installation - [Next.js](https://newtui.dev/docs/installation/next): Install newt/ui in a Next.js project: where the tokens go, and which components need the client boundary. - [Vite (React)](https://newtui.dev/docs/installation/vite): Install newt/ui in a React project built with Vite, from the template or into an app you already have. - [Vite (Vue)](https://newtui.dev/docs/installation/vite-vue): Install newt/ui in a Vue 3 project built with Vite, from the template or into an app you already have. - [Nuxt](https://newtui.dev/docs/installation/nuxt): Install newt/ui in a Nuxt 4 project, with the module that auto-imports the components and injects the tokens. - [Astro](https://newtui.dev/docs/installation/astro): Install newt/ui in an Astro site, where React and Vue components can live side by side as islands. - [TanStack Start](https://newtui.dev/docs/installation/tanstack-start): Install newt/ui in a TanStack Start app: the root route stylesheet, the alias, and the two commands. - [React Router](https://newtui.dev/docs/installation/react-router): Install newt/ui in a React Router framework-mode app: the root layout, the alias, and the two commands. - [Laravel](https://newtui.dev/docs/installation/laravel): Install newt/ui in a Laravel app running Inertia, with either the React or the Vue starter kit. - [Manual installation](https://newtui.dev/docs/installation/manual): Everything the CLI does, done by hand — for a project the CLI cannot read, or one you would rather it did not touch. ## Design - [Design guide](https://newtui.dev/docs/design): The decisions every newt/ui component follows: naming, the token layer, states, and why there is no motion. - [Accessibility](https://newtui.dev/docs/accessibility): The checklist every newt/ui component passes, and what you still have to do in the markup you write around it. - [Trademark & attribution](https://newtui.dev/docs/trademark): newt/ui is an independent project, visually inspired by Discord's client design and not affiliated with Discord Inc. - [Colours and tokens](https://newtui.dev/docs/colors): Every --newt-* token with its dark and light value and the Tailwind utility it generates. ## Forms - [Forms](https://newtui.dev/docs/forms): newt/ui ships form controls, not a form library. Pick the one you already use and wire it to them. - [react-hook-form](https://newtui.dev/docs/forms/react-hook-form): Wire newt/ui's form controls to react-hook-form, with zod for validation. - [TanStack Form](https://newtui.dev/docs/forms/tanstack-form): One form API for React and Vue, wired to newt/ui's controls with zod for validation. - [vee-validate](https://newtui.dev/docs/forms/vee-validate): Wire newt/ui's form controls to vee-validate, with zod for validation. ## Actions - [Button](https://newtui.dev/docs/components/button): Displays a Discord-styled button with brand, secondary, success, danger and link variants. - [Dropdown Menu](https://newtui.dev/docs/components/dropdown): A floating menu panel with icon, label and description items that highlight in brand color. - [Context Menu](https://newtui.dev/docs/components/context-menu): A floating right-click style menu with items, keyboard shortcuts, dividers and a danger variant. - [Keyboard Shortcut Tag](https://newtui.dev/docs/components/kbd-tag): A small monospace tag for displaying keyboard shortcuts. - [Tabs](https://newtui.dev/docs/components/tabs): A pill-style tab list that switches the active tab on click. ## Feedback - [Badge](https://newtui.dev/docs/components/badge): A small pill used to label status, counts or categories. - [Toast](https://newtui.dev/docs/components/toast): A transient notification with a status icon that auto-dismisses after a timeout or when closed. - [Modal](https://newtui.dev/docs/components/modal): A centered dialog over a dimmed overlay that closes on Escape, overlay click or an explicit close control. - [Tooltip](https://newtui.dev/docs/components/tooltip): A small floating label that appears above an element on hover or focus. - [Progress Bar](https://newtui.dev/docs/components/progress): A gradient progress bar for boosts, uploads and other long-running tasks. - [Cooldown Bar](https://newtui.dev/docs/components/cooldown-bar): A slim progress bar with a label and monospace countdown for command cooldowns. - [Skeleton Loader](https://newtui.dev/docs/components/skeleton): A shimmering placeholder shown while content is loading. - [Empty State](https://newtui.dev/docs/components/empty-state): A centered placeholder with an icon, title, and hint shown when a list or view has no content. - [Pagination](https://newtui.dev/docs/components/pagination): Numbered page buttons with previous/next controls, plus a divider-style load-more row. ## Identity & presence - [Avatar](https://newtui.dev/docs/components/avatar): A circular user avatar with image support and initials fallback in three sizes. - [Status Indicator](https://newtui.dev/docs/components/status-indicator): A presence dot anchored to an avatar, with online, idle, do-not-disturb, offline and streaming states. - [Member List](https://newtui.dev/docs/components/member-list): A server member sidebar: role sections, presence, coloured names and APP tags. - [Role Tag](https://newtui.dev/docs/components/role-tag): A compact bordered tag with a coloured dot for displaying a member's role. - [Voice Channel Row](https://newtui.dev/docs/components/voice-channel): A sidebar voice channel row with a collapsible header and the list of connected members. - [Server Banner](https://newtui.dev/docs/components/server-banner): Invite-style card with a server icon, name, live member counts and a join button. - [Stage Banner](https://newtui.dev/docs/components/stage-banner): A full-width announcement strip with a status dot, optional action button and dismiss control. - [Typing Indicator](https://newtui.dev/docs/components/typing-indicator): Three bouncing dots with a label that signals someone is typing. ## Messaging - [Chat](https://newtui.dev/docs/components/chat): The channel shell: a scrolling message log with the composer pinned below it. - [Message List](https://newtui.dev/docs/components/message-list): The polite live region that logs grouped messages in a channel. - [Message Composer](https://newtui.dev/docs/components/message-composer): The channel input bar: attachment control, text field with combobox hooks, and send. - [Embed](https://newtui.dev/docs/components/embed): A Discord-inspired rich message embed with an accent bar, author, title, description, fields, footer and timestamp. - [Message Group](https://newtui.dev/docs/components/message-group): A grouped chat message with author, timestamp, reply preview, reactions and an ephemeral state. - [Invite](https://newtui.dev/docs/components/invite): The server invite card a link unfurls into inside a message. - [Reaction Pill](https://newtui.dev/docs/components/reaction): A toggleable emoji reaction pill, plus the group that rows them under a message. - [Reply Preview](https://newtui.dev/docs/components/reply-preview): A compact "replying to" bar showing the author, a truncated excerpt, or the slash command that was used. - [Poll](https://newtui.dev/docs/components/poll): A question, its answers, and the share of the vote behind each one. - [System Message](https://newtui.dev/docs/components/system-message): The lines a channel writes about itself — joins, boosts, pins — with no author and no avatar. - [Thread Preview](https://newtui.dev/docs/components/thread-preview): The thread hanging off a message: its name, its reply count and the last thing said. - [Attachment Card](https://newtui.dev/docs/components/attachment): File card showing a type icon, file name, size and a download action. - [Slash Command](https://newtui.dev/docs/components/slash-command): An inline /command with its subcommand path and typed options, including the focused one. - [Slash Command Suggestions](https://newtui.dev/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](https://newtui.dev/docs/components/divider): A horizontal rule with an optional centered label, spacing steps and a line-less mode. - [Channel Header](https://newtui.dev/docs/components/channel-header): The bar above the message list, with the channel name, topic and channel actions. - [Channel Topic Bar](https://newtui.dev/docs/components/channel-topic): A header bar showing the channel name and a truncating topic description. - [Channel Welcome](https://newtui.dev/docs/components/channel-welcome): The header that opens a channel, shown above its very first message. - [Channel Info](https://newtui.dev/docs/components/channel-info): The channel detail panel that covers a channel on narrow screens. - [Notification Badge](https://newtui.dev/docs/components/notif-badge): A small count badge or unread dot for signalling new activity on avatars and channels. - [User Profile Popout](https://newtui.dev/docs/components/user-profile): Floating profile card with a banner, overlapping avatar, bio section and role tags. ## Message components - [Action Row](https://newtui.dev/docs/components/action-row): The row of buttons and selects attached under a message. - [V2 Container](https://newtui.dev/docs/components/v2-container): The Components V2 block that groups text, separators and action rows behind one accent bar. - [Section](https://newtui.dev/docs/components/section): A block of text with one accessory beside it — a thumbnail, or a button. - [Media Gallery](https://newtui.dev/docs/components/media-gallery): One to ten images in a mosaic, laid out by how many there are. - [Entity Select](https://newtui.dev/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](https://newtui.dev/docs/components/file-upload): A drop zone that also opens a file picker from the keyboard. - [Checkbox Group](https://newtui.dev/docs/components/checkbox-group): Several answers out of a visible list, each with an optional description. ## Forms & data - [Form Fields](https://newtui.dev/docs/components/form-fields): Inputs, textareas, selects, labels, helper text, switches and checkboxes styled for the newt/ui dark theme. - [Radio](https://newtui.dev/docs/components/radio): One choice out of a short, visible list, with the ring and dot the client's settings panels use. - [Token Field](https://newtui.dev/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](https://newtui.dev/docs/components/select-menu): A Discord-inspired string select: combobox trigger, keyboard-driven listbox and a portalled panel. - [Card](https://newtui.dev/docs/components/card): A bordered, elevated panel for grouping related content. - [Permission Row](https://newtui.dev/docs/components/permission): A settings row with a deny / inherit / allow tri-state toggle. - [Event Timeline](https://newtui.dev/docs/components/timeline): A vertical event log with connected status dots, titles and metadata. - [Bot Command Card](https://newtui.dev/docs/components/bot-command-card): A card documenting a slash command, its owning bot and its typed options. ## Formatting - [Typeset](https://newtui.dev/docs/components/typeset): Styles rendered markdown with three variables — size, leading and flow — over the --newt-* tokens. - [Mention Chip](https://newtui.dev/docs/components/mention): An inline chip for user, channel, role and app mentions, with an optional avatar. - [Custom Emoji](https://newtui.dev/docs/components/custom-emoji): An uploaded emoji that sits on the text baseline and reads as :name:. - [Timestamp](https://newtui.dev/docs/components/timestamp): One instant, written in the reader's own locale and time zone. - [Spoiler](https://newtui.dev/docs/components/spoiler): Inline text hidden behind a dark block until the reader clicks to reveal it. - [Inline Code](https://newtui.dev/docs/components/inline-code): A monospace pill for code inside a line of message text. - [Code Block](https://newtui.dev/docs/components/code-block): A monospace preformatted block that colours its own source from a language name. ## Utilities - [Scrollbar Utility](https://newtui.dev/docs/components/scrollbar): Discord-styled scrollbars for any scrollable container, with an optional keyboard-focusable viewport. - [App Launcher](https://newtui.dev/docs/components/app-launcher): The Apps popout, with search, a recents strip and the apps installed in a server. - [Direction](https://newtui.dev/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](https://newtui.dev/docs/components/chat-window): A whole channel view: header, scrolling message list and composer, composed from the registry. - [Server sidebar](https://newtui.dev/docs/components/server-sidebar): The column beside a channel: the server banner, the voice channel and the grouped member list. - [Command panel](https://newtui.dev/docs/components/command-panel): A command browser with a selectable suggestion list and a detailed option card. ## Other - [August 2026 — Components rework](https://newtui.dev/changelog/2026-08-components-rework): Twelve new components, an opt-in light palette, and a pass over every existing component against the original specs. - [August 2026 — Trusted publishing](https://newtui.dev/changelog/2026-08-npm-oidc): Releases now publish to npm over OIDC, with no long-lived token in the repository. - [October 2026 — @newtui/mcp 0.1.0, newtui 2.2.1, @newtui/nuxt 1.0.1](https://newtui.dev/changelog/2026-10-15-release): New package: @newtui/mcp, an MCP server for the newt/ui documentation. - [October 2026 — Release pipeline and docs MCP](https://newtui.dev/changelog/2026-10-release-pipeline): Releases publish again, the site changelog writes itself, and the documentation gets its own MCP server. - [Registry](https://newtui.dev/docs/registry): How newt/ui serves components over HTTP, and how to run a registry of your own that the same CLI can install from. - [Registry examples](https://newtui.dev/docs/registry/examples): Four items, whole: a component, one with dependencies, a theme, and a demo. - [Registry: getting started](https://newtui.dev/docs/registry/getting-started): Build a registry of your own, serve it as static JSON, and install from it with the same CLI. - [Registry: MCP](https://newtui.dev/docs/registry/mcp): What a registry has to serve for the newtui MCP server to browse, search and install from it. - [registry-item.json](https://newtui.dev/docs/registry/registry-item-json): One item, with the source of every file it writes and everything the CLI needs to place them. - [registry.json](https://newtui.dev/docs/registry/registry-json): The index every registry serves: the list of items a CLI, an agent or a search box can read without fetching each one. ## RSS Feeds - [newt/ui — Changelog](https://newtui.dev/changelog/rss.xml) ## Agent skills - [newt-ui](https://newtui.dev/.well-known/agent-skills/newt-ui/SKILL.md): Read the newt/ui docs instead of answering from memory. Discord-inspired components for React and Vue Use when a task involves newt/ui: how it works, how to set it up or configure it, or its API. ## Agent resources - [llms-full.txt](https://newtui.dev/llms-full.txt): The full Markdown of every page in one file. - [Page Markdown](https://newtui.dev/index.md): Append `.md` to any page URL to fetch that page as raw Markdown. - [JSON API](https://newtui.dev/api/docs/pages.json): Page index of the JSON docs API; each entry links the page's JSON and Markdown forms. Described by the OpenAPI document at https://newtui.dev/openapi.json. - [Agent skills](https://newtui.dev/.well-known/agent-skills/index.json): Agent Skills discovery index of the skills this site publishes. - [API catalog](https://newtui.dev/.well-known/api-catalog): RFC 9727 linkset of the APIs documented here. - [AI catalog](https://newtui.dev/.well-known/ai-catalog.json): ARD manifest of the agent-facing resources on this site (MCP server, skills, APIs). - [agent-readability.json](https://newtui.dev/agent-readability.json): Manifest of every agent-facing artifact on this site. - [Sitemap](https://newtui.dev/sitemap.xml): Every indexable page URL with its last-modified date.