Getting started

Installation

THJ UI is a copy-in registry, not an installed package. Each app keeps its own copy of a component and its own lockfile, which is why the three THJ frontends can sit on different Tailwind majors without conflict.

1. Tokens and Tailwind

The components read CSS-variable tokens. Copy the token block from the Theming page into your global stylesheet. Then map the token names to utilities.

Tailwind v3 (config file):

// tailwind.config.js -> theme.extend.colors
ink: { DEFAULT: "var(--ink)", 1: "var(--ink-1)", 2: "var(--ink-2)", 3: "var(--ink-3)", 4: "var(--ink-4)" },
paper: { DEFAULT: "var(--paper)", strong: "var(--paper-strong)", dim: "var(--paper-dim)", faint: "var(--paper-faint)" },
signal: { DEFAULT: "var(--signal)", soft: "var(--signal-soft)" },
glass: { DEFAULT: "var(--glass)", strong: "var(--glass-strong)", hover: "var(--glass-hover)", border: "var(--glass-border)" },
// plus rule, amber, sage, stone, bar, seg and the shadcn hsl bridge (border, ring, background, ...)

Tailwind v4 (globals.css):

@theme inline {
  --color-ink: var(--ink);
  --color-paper: var(--paper);
  --color-paper-strong: var(--paper-strong);
  --color-signal: var(--signal);
  --color-glass: var(--glass);
  /* ...one --color-* per token name... */
}

2. The cn helper

npx shadcn@latest add https://ui.thjsecurity.tech/r/utils.json

Or add it by hand: lib/utils.ts exporting cn() over clsx and tailwind-merge.

3. Add components

npx shadcn@latest add https://ui.thjsecurity.tech/r/button.json https://ui.thjsecurity.tech/r/card.json

Each item lands in components/ui and pulls its registry and npm dependencies. From then on the file is yours to edit.

Fonts

Nunito for body, Nunito Sans for display, IBM Plex Mono for numbers and eyebrows. Wire them through @fontsource into --font-body, --font-display and --font-mono-stack.