Installation

Inbox is distributed the way shadcn/ui is: not as a package you depend on, but as a registry you install from. The CLI copies the source into your project, so the components are yours to edit — which is what you want from a system that is still changing.

Add a component

npx shadcn@latest add https://ui.whoisroktim.lol/r/button.json

That is all it takes. The CLI resolves everything the component needs and writes it into your project. Asking for modal pulls in button — because the modal's footer uses it — and both pull in the token layer:

✔ Created 6 files:
  - src/styles/tokens.css
  - src/styles/typography.css
  - src/lib/cn.ts
  - src/components/icon.tsx
  - src/components/ui/button.tsx
  - src/components/ui/modal.tsx

It also adds clsx, tailwind-merge and class-variance-authority to your package.json.

Register the namespace instead

If you are going to install more than one thing, register it once:

npx shadcn@latest registry add @inbox=https://ui.whoisroktim.lol/r/{name}.json

Then the commands get short:

npx shadcn@latest add @inbox/button @inbox/modal @inbox/toast

Then import the tokens

The one manual step. Add the two generated stylesheets to your global CSS, after Tailwind:

@import "tailwindcss";
@import "./styles/tokens.css";
@import "./styles/typography.css";

Components read CSS custom properties and never hardcode a colour, so without these two imports they render unstyled. This is the only step the CLI cannot do for you — it will not edit your global stylesheet.

Requirements

Tailwind CSS v4 and React 19. The token layer uses @theme and @utility, which are v4 features.

What `tokens` gives you

Every component depends on one registry item, tokens. It carries the semantic colour, type, elevation and scale variables — each with a light and a dark value — plus cn() and the icon set. That is why a component never needs a dark: variant: bg-raised already resolves correctly in both themes.

If the registry moves

The commands above name https://ui.whoisroktim.lol, read at build time from REGISTRY_URL. Point that at a new host, redeploy, and every command on this page updates with it.

Nothing already installed breaks. The CLI copies source into your project, so there is no runtime dependency on this host — components you have already added keep working regardless of where the registry lives. Only future installs need the new URL, and anyone who registered the namespace re-runs one command:

npx shadcn@latest registry add @inbox=https://ui.whoisroktim.lol/r/{name}.json

Building the registry

If you are working on this system rather than consuming it:

npm run registry

That regenerates registry.json and runs shadcn build, which writes public/r/*.json. npm run build does it for you, and npm run registry:check fails if the committed output has drifted from the source.

Set REGISTRY_URL for production — items cross-reference each other by absolute URL, and the default is localhost:3000:

REGISTRY_URL=https://ui.example.com npm run registry