Setup

EqUIp is not a package. Each of the 194 parts is two files, a .tsx and a .css, that you copy into your repo and own from then on. The only shared piece is one file of tokens.

Install parts
Set the look
Without React
Start from a block
For coding agents
Tokens and overriding
Keys on this site

Install parts

Add parts to the loadout from the board, where the 194 parts sit in 16 groups, or from any part page. The loadout in the bottom bar builds one command for everything you picked, with the finish and mix you are viewing:

npx https://equip.studio311.app/equip.tgz add dialog tabs

That runs EqUIp's installer straight from this site. It has no dependencies, and it fetches its current version from this site on each run, falling back to the copy it came with when offline. It writes into components/equip (or src/components/equip when your project has a src folder and no components folder): the tokens file equip.css, then a .tsx and a .css for each part, plus any part those are built from. It then prints the stylesheet imports to add.

`add dialog --finish glass`	Also copies a finish, as `finish-glass.css`.
`add dialog --mix ledger`	Also writes a mix as its own finish file: a ready mix by name, or any mix by the code the Mix page gives you.
`add badge --html`	Writes the part as HTML and CSS instead of React. Only for parts that need no JavaScript.
`add block:dashboard`	Writes a block and every part it uses. See Start from a block.
`add dialog --dir src/ui`	Writes the parts somewhere else.
`add dialog --dry`	Shows what would be written and writes nothing.
`add dialog --overwrite`	Replaces files you already have. Without it, they are left alone.
`add dialog --from <url>`	Reads the registry from another copy of this site.
`list`	Prints every part by group, then every block.
`mcp`	Serves the library to a coding agent. See For coding agents.

If you would rather not run anything, every part page shows both files in full with a copy button. The registry is plain JSON under /r/.

Import the tokens file once, at the root of your app, before your own styles.

app/layout.tsx

import "@/components/equip/equip.css";

Each part imports its own CSS, so using one is a plain import.

import { Button } from "@/components/equip/button";

export function SaveBar() {
  return <Button variant="accent">Save changes</Button>;
}

Set the look

Every colour, radius, height, font size and motion curve in every part comes from a token. Override a token and all 194 parts follow. There are three ways to do it on this site, and all three end in the same thing: one small CSS file, or one flag on the install command.

The Look panel (press L on any page) changes the look live across the whole site and checks contrast as you go. Pick a finish and a ready mix at the top, then set colour, corners, control size, text size, padding, border strength, shadow, see-through glass and blur, grain, typeface, how fast, bouncy and squashy things feel, icon weight and chart colours. On a part page, the panel's This part tab sets that part's own options; 106 parts have one, and their pages show the same controls under the specimen with the code for what you set. When you are done, copy the CSS or the install command.

Start asks a few questions instead, about what you are building, its colour, surfaces, shape, size and energy, and gives you a look, a set of parts and one command that installs both. Mix shows the 11 ready mixes on real parts, to copy as they are or load into the Look panel, and lets you download your own finish file or copy a link to it.

Finishes

The parts carry no look of their own. A finish is one small CSS file of token overrides laid over the same parts: it styles your components, not this website. The site only wears whichever one you pick so you can see it on every part. Glass makes panels see-through and blurs what is behind them, and goes solid when the reader asks for less transparency. This site ships 3; choose one at the top of the Look panel, or press F.

Ember	Warm paper, soft black ink and one orange fill. This is the default, built into equip.css.
Glass	Translucent surfaces that blur what is behind them, with a tint floor so text stays readable. Adds `finish-glass.css`.
Primer	Cool primer grey, navy ink and one hi-vis yellow fill. Adds `finish-primer.css`.

Import a finish straight after the tokens. A mix from --mix is written as its own finish file, such as finish-ledger.css, and goes after that. To make your own by hand, copy a finish file and change the values.

app/layout.tsx

import "@/components/equip/equip.css";
import "@/components/equip/finish-primer.css";

Light and dark

Colour tokens are written with light-dark(), so parts follow the system setting with no extra CSS. To force a theme, set data-theme="light" or data-theme="dark" on any element, usually html.

Without React

Every part's look lives in its CSS, on plain HTML elements. 79 of the 194 parts need no JavaScript at all, so they also come as HTML: the exact markup the React part renders, generated from it, ready for Vue, Svelte, Angular, Rails, Laravel or a plain page. Their pages show it under each example, in a code box labelled HTML.

npx https://equip.studio311.app/equip.tgz add badge card --html

This writes equip.css, the .css of each part the markup uses and a .html file with each part's markup, and prints the <link> tags to add, in order. Tokens, finishes and mixes are the same CSS files, so a finish or a --mix restyles the HTML exactly as it does the React parts.

In your page

<link rel="stylesheet" href="/components/equip/equip.css">
<link rel="stylesheet" href="/components/equip/badge.css">
<link rel="stylesheet" href="/components/equip/button.css">
<link rel="stylesheet" href="/components/equip/card.css">

Parts that need JavaScript, such as dialogs, menus and comboboxes, are React only for now. Each part page says which kind it is, and the installer skips them with a note.

Start from a block

A block is a whole section or screen made from parts, such as a hero, a pricing section, a dashboard, a records table, sign in, checkout or an assistant chat. There are 18. Each is a starting point you copy and change, not something you depend on.

npx https://equip.studio311.app/equip.tgz add block:dashboard

The installer writes the block to components/blocks/dashboard.tsx with its layout CSS beside it, next to the parts folder, and every part it uses to components/equip as usual, pointing the block's imports at them. Mix blocks and parts in one command, as in add block:hero block:faq dialog. Blocks are React only, so they cannot be combined with --html.

For coding agents

The installer is also a Model Context Protocol server, so an assistant such as Claude Code or Cursor can use EqUIp without you browsing for it. Ask for a settings page or a checkout and it can find the parts or a block, read how each one is used, install them, and make a finish to match your product.

Claude Code

claude mcp add equip -- npx -y https://equip.studio311.app/equip.tgz mcp

Any other MCP client

{
  "mcpServers": {
    "equip": { "command": "npx", "args": ["-y", "https://equip.studio311.app/equip.tgz", "mcp"] }
  }
}

`find_parts`	Searches the parts by what the interface needs, and names any kit that fits. With no query, lists every part by group.
`get_part`	Props, keyboard, notes, a working example, the install command and, on request, the source. With `format: "html"`, the HTML and CSS version.
`list_blocks`	The blocks, filtered by category or words.
`get_block`	One block: the parts it uses, notes for adapting it, the install command and its source.
`list_kits`	Starting sets of parts by kind of product.
`list_mixes`	The ready mixes and the settings behind each.
`make_finish`	Builds a finish from settings or a ready mix, checks its contrast, and returns a link to keep tuning it on the Mix page.

It runs on your machine and only reads this site's registry. It writes nothing: the assistant installs parts with the same command you would.

Tokens and overriding

The tokens are custom properties on :root in equip.css, outside any layer. A finish overrides them the same way, which is why it loads after the tokens. Even the stroke weight of the 283 icons is a token, --eq-icon-stroke.

Overriding styles

All part styles sit in a cascade layer named equip, and a block's layout CSS in one named blocks. Anything you write outside a layer wins without a specificity fight, so a one-off change is one plain rule.

.eq-button[data-variant="outline"] {
  border-style: dashed;
}

The other side of that: an unlayered reset that restyles buttons or inputs will also win. Put resets in a layer and declare the order before equip.css loads, as this site does.

@layer reset, equip;

What the parts assume

React 19. Parts take ref as a prop and spread native attributes onto the root element.
Current browsers. The parts lean on native dialog, the Popover API, cascade layers, :has() and light-dark(). Where a part uses something newer, its page says what the fallback does.
A part with no "use client" renders on the server and ships no JavaScript of its own. Each part page states which kind it is.

Keys on this site

Single keys stand down while you type in a field or work inside a part on show.

`/`	Find anything: parts, blocks, icons, Look settings, pages and commands. ⌘K and Ctrl K do the same.
`JK`	Go to the next or previous part.
`A`	On a part page, add that part to the loadout, or take it out.
`C`	On a part page, copy its source.
`M`	Turn calipers on or off.
`L`	Open or close the Look panel.
`F`	Switch to the next finish.
`T`	Switch between light and dark.
`B`	Go back to the board.