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, with 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 and one globals.css ensure
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 to https://okibi.cndr.dev on the production
deployment and http://localhost:3000 in dev. Override it with
NEXT_PUBLIC_REGISTRY_URL when needed, and the command stays 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.