Installation

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

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.

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>