Prerequisites

React 19
Tailwind CSS v4 — the token layer (warren-base) is a CSS-first theme.

1. Initialize the shadcn CLI

If your project is not yet set up for shadcn:

npx shadcn@latest init

This step is what creates components.json with your path aliases (@/components, @/lib, ...). Run it before installing anything from Warren — without it the CLI has no alias resolution and writes files to a literal @/components/ui/ directory at your project root, which nothing imports.

One cn, not two. Warren ships a single class-merge helper (cn, clsx + tailwind-merge) and every component imports it as @/lib/cn via the registry dependency @warren/cn. shadcn init also generates a @/lib/utils file (the base shadcn convention) — leave it alone if you only use Warren, or keep both if you mix in base shadcn components; they are equivalent utilities, so never hand-roll a third.

2. Install the base theme

warren-base installs the design tokens (colors, fonts, radius, keyframes) as CSS variables and a Tailwind v4 @theme mapping. Every component depends on it.

npx shadcn@latest add https://warren.eduard3v.com/r/warren-base.json

3. Add components

npx shadcn@latest add https://warren.eduard3v.com/r/panel.json
npx shadcn@latest add https://warren.eduard3v.com/r/badge.json

Registry dependencies (cn, the shared tone type, and warren-base) resolve automatically.

Use as a namespaced registry

{
  "registries": {
    "@warren": "https://warren.eduard3v.com/r/{name}.json"
  }
}

npx shadcn@latest add @warren/panel

Pinned installs: grab warren-registry-vX.Y.Z.zip from the releases page and serve or copy the r/ JSONs it contains.

Manual installation

Every component page has an Install → Manual tab with the full source. Copy the files into your project, install the listed npm dependencies (clsx, tailwind-merge, and d3-force for the graph), and make sure the token CSS is in place.

Theming

warren-base ships five complete palettes: the warm-parchment light set on :root (the canonical identity) plus dark, jade, green-neon, and dracula as token-for-token override blocks keyed by a data-theme attribute. Set it on <html> — statically or at runtime — and every Warren component recolors, because components read tokens, never hardcoded hexes:

<html data-theme="dracula">

The five built-in names: light, dark, jade, green-neon, dracula.

For a ready-made control, install the theme selector:

npx shadcn@latest add @warren/theme-select

It applies the attribute on selection and persists the choice as a plain string under the warren-theme localStorage key. To avoid a flash of light theme before hydration, restore it pre-paint with an inline script as early in <head> as possible:

<script>
  try {
    var t = localStorage.getItem("warren-theme")
    if (t) document.documentElement.setAttribute("data-theme", t)
  } catch (e) {}
</script>

Installation