THJ UI

The shared component library and design tokens behind THJ Security's frontends, documented at ui.thjsecurity.tech.

It is a copy-in registry, not an installed package. Each app pulls a component into its own components/ui and owns the copy from then on, so the THJ frontends can sit on different Tailwind majors without version lockstep. This matches the org rule that each deployable keeps its own dependency graph.

Use a component

The registry is shadcn-compatible, so the standard CLI resolves the whole graph:

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

Each item lands in components/ui/<name>.tsx and pulls its token helper (lib/utils.ts) and any registry or npm dependencies.

The design language

One dark, restrained, system-design look: ink canvas, frosted glass panels, a single crimson accent, Nunito and IBM Plex Mono. Colour carries severity, never category. The dark console language is the default; a light theme is the same components with the token set swapped under :root[data-theme="light"].

The tokens and the component CSS layer live in src/app/globals.css; the Tailwind colour mapping is in tailwind.config.js. Both are lifted from the production Anti Fraud console and the ASM platform, which already run this system.

Develop

npm install
npm run dev        # builds the registry, then runs the docs at :3000
npm run build      # registry + static docs
npm run registry   # rebuild public/r/*.json only

• Components: src/components/ui
• Docs pages and chrome: src/app, src/components/docs
• Live demos: src/components/demos
• Catalogue metadata (drives nav + registry): src/lib/registry.ts
• Registry build: scripts/build-registry.mjs (keep its META map in step with registry.ts)

House rules

ASCII hyphens only, no em or en dashes anywhere. No coloured left-border accent bars. Every HTML document is lang="en". No Claude co-author or session lines in commits.