Introduction

Strange UI is Comhard's internal design system — 81 primitives, 30 blocks, and a token-driven theme distributable via the shadcn CLI.

Strange UI is the design system that powers Comhard's products. It ships 81 primitives, 30 composed blocks, and a complete three-layer token system (brand, semantic, utility) ready to be themed per-product. The library is distributed as a shadcn-compatible registry under the @strange-ui namespace; consumers install components à la carte via the shadcn CLI.

What's inside

Strange UI is organized into a small number of clearly-scoped layers:

  • 81 primitive components in registry/ui/ — buttons, inputs, dialogs, tooltips, plus Comhard-specific marks (BrandMark, DevMark, TenantMark) and data displays (KPI, ScoreRing, Heatmap, StorageBar).
  • 30 composed blocks in registry/blocks/ — full app shells, sidebars, command palettes, form sections, wizards, data tables, and domain panels (TriageList, LiveJobsPanel, FileBrowser).
  • One typed theme (registry/themes/theme-strange-ui.json) — brand and semantic tokens for light and dark schemes.
  • One style item that bundles tokens + base CSS so a consumer can bootstrap the whole system in a single command.

The design philosophy

Three rules drive every decision in this library:

  1. Tokens, not values. No component ever hardcodes a color, radius, or spacing. Every visual property resolves through a Tailwind utility that maps to a CSS variable. This is what makes per-product theming a one-line override.
  2. shadcn-compatible at the boundary. Strange UI primitives are drop-in replacements for shadcn/ui's. If you know <Button variant="primary">, you know ours. The Comhard-specific surface (marks, KPIs, etc.) is additive.
  3. Open code, not a black box. Components ship as source. Consumers paste them into their project via the CLI and own them outright — no runtime dependency on this repo.

Get started

If you're setting up Strange UI in a new Comhard product, start at Installation. The fastest path:

npx shadcn@latest add @strange-ui/init

This installs the cn() utility, applies the theme tokens to your globals.css, and pulls in the core dependency set. From there, add individual components as you need them.

Browse the system