Introduction
A themeable React + Tailwind component library — one signal-red cutting across a monochrome graphite HUD, built for dense, high-contrast console interfaces.
okibi is a personal, reusable component library built on React, Tailwind CSS v4, and shadcn/ui primitives — styled in a bold "graphic realism" aesthetic: high-contrast Signal-Scarlet-on-graphite, condensed technical typography, and HUD / info-graphic detailing (corner-bracket reticles, coordinate labels, barcode strips, hazard striping, glitch accents).
Everything you see in these docs renders from the exact same component source
that installs into your project — one Tailwind build, one globals.css, so the
docs output and the installed output are visually identical.
Install the theme
Every component reads from a shared set of CSS-variable design tokens. Install the theme once to get the full palette, fonts, radius, shadows and motifs:
npx shadcn@latest add https://okibi.cndr.dev/r/theme.jsonAdd a component
Then add any component by name:
npx shadcn@latest add https://okibi.cndr.dev/r/button.jsonThe URL resolves automatically — https://okibi.cndr.dev on the production
deployment, http://localhost:3000 in dev (override with
NEXT_PUBLIC_REGISTRY_URL) — so the command is always correct.
Two sections
- Primitives — shadcn/ui controls restyled to the tokens (Button, Input, Select, Dialog, Table, and more).
- Signature — the branded components where the look lives:
BracketFrame,Readout,ConsolePanel,CoordLabel,GlitchText,Ticker,HazardTape.
Principles
- Dark is primary. An inverted "bone poster" light mode is opt-in.
- No hardcoded colors. Everything flows from color tokens — OKLCH CSS variables generated from a single source.
- Framework-agnostic. Components carry no
next/*imports — drop them into Vite, Remix, or Next. - Accessible. Radix semantics preserved, visible signal focus rings, and all
glitch / scanline / ticker motion respects
prefers-reduced-motion.