---
title: "Introduction"
description: "A component library, a design token system and an agent guide for building Discord-inspired interfaces in React, Vue and plain HTML."
---

newt/ui is a component library for building Discord-inspired interfaces — bots,
dashboards and docs that look like they belong next to the client. Every
component ships three times over: as plain HTML and CSS, as a React file, and as
a Vue single file component, all reading one set of `--newt-*` design tokens.

There is no package to install and no runtime to depend on. The CLI copies
component source into your project, the same way shadcn/ui does, and stops
there.

_Live example of Message Group — see the page for the rendered demo._

## What it is [#principles]

Four decisions the whole registry is built on. They are why a component here is
short enough to read before you paste it.

**One token system, three targets**

The tokens are declared once and every surface reads them: the plain HTML
and CSS build, the React wrappers, and the Vue single file components.
Change a token and all three move together.

**You own the code**

The CLI writes component source into your project and stops there. A
component you need to bend is a file you already have, under Apache-2.0.

**No motion by default**

Hover, focus, online, do-not-disturb and loading are carried by colour,
border and shape — the status dot states its mode by its outline, not by a
pulse.

**Accessible by construction**

Body text meets WCAG AA contrast, every control is reachable by{" "}
<kbd>Tab</kbd>
with a visible focus ring, and presence is announced rather than left to
colour alone.

## Install [#install]

One CLI for both frameworks. It reads your project during `init`, then writes
component source into it.

```bash
npx newtui@latest init
```

Then add what you need:

```bash
npx newtui@latest add button embed member-list
```

## Where to go next [#next]

Start with the [installation guide](/docs/installation), which covers both CLIs
and the Nuxt module; browse [the components](/docs/components), each with a live
example, the files it writes and the dependencies it needs; or read how to drive
the registry from an agent in [Using with AI](/docs/using-with-ai).

newt/ui is an independent project. It is visually inspired by Discord's client
design but is not affiliated with, endorsed by, or sponsored by Discord Inc.