CATHODE · UI

A retro-future design system. Monospace type, pixel shapes, tight saturated accents, motion + haptics + sound baked in, AI-native surfaces for agent-driven apps.

What's inside

Seventeen React primitives under @cathode-ui/react — layout boxes, pixel meters, pills, tiles, chips, counters, toggles, a portal-rendered Dialog, a first-class streaming Chat, and an AI-enabled TextField with ghost-text suggestions. All under a 7 KB gzipped index bundle.

A machine-readable cathode.manifest.json describes every component so AI coding agents can discover + compose Cathode primitives without scraping source. A companion MCP server exposes those same facts as tool calls.

Quick taste

npm install @cathode-ui/react

// in your root
import '@cathode-ui/react/tokens.css';
import '@cathode-ui/react/fonts.css'; // optional

import { CathodeProvider, TerminalFrame, Pill, Button } from '@cathode-ui/react';

<CathodeProvider>
  <TerminalFrame title="TELEMETRY">
    <Pill title="LIVE" accent="success" active />
    <Button variant="primary">SUBMIT</Button>
  </TerminalFrame>
</CathodeProvider>

Design principles

Pixel squares, not pills. Near-zero border radius; the aesthetic is hardware-instrument, not friendly-web.
Monospace everywhere. One font stack, one voice.
Semantic + palette colors, cleanly split. danger / success / warning / info / accent carry meaning; amber / pink / purple / teal / grey are just colors.
Feedback is first-class. Every interactive primitive supports motion + haptics + sound out of the box, with a global opt-out.
AI is a collaborator. Components expose AI hooks; the manifest lets AI agents author Cathode UIs directly.

Version 0.3.0 · MIT · Built for retro-future React apps with motion, haptics, sound, and AI-native surfaces.