Nerv UI

> START_IN_30_SECONDS

NERV-UI is a production React/TypeScript component library, a published npm package, 48 documented components, and a portable SKILL.md for coding agents. See the live demo, examples, docs, npm package, or agent skill.

> USE_WITH_AN_AI_CODING_AGENT

Codex discovers the canonical skill from .agents/skills/nerv-ui in this repository. To install it for a user-level Codex setup, copy the same single directory:

git clone --depth 1 https://github.com/mdrbx/nerv-ui.git /tmp/nerv-ui-skill
mkdir -p ~/.codex/skills
cp -R /tmp/nerv-ui-skill/skills/nerv-ui ~/.codex/skills/nerv-ui

Claude Code discovers the same source through .claude/skills/nerv-ui. For Hermes Agent, copy it to ~/.hermes/skills/nerv-ui and confirm it appears in hermes skills list. These paths follow the current official documentation for each agent.

The skill tells an agent when NERV-UI fits, installs the real package, uses only exported components, and includes dashboard, terminal, and auth recipes.

Prompt → agent → application: “Install @mdrbx/nerv-ui and build an accessible operations dashboard with DataGrid, Gauge, and BarChart; use original labels and respect reduced motion.”

> INSTALL_IN_A_REACT_PROJECT

npm install @mdrbx/nerv-ui framer-motion

import { Button, TerminalDisplay, Gauge } from "@mdrbx/nerv-ui";
import "@mdrbx/nerv-ui/styles.css";

export default function App() {
  return (
    <div className="bg-black min-h-screen p-8">
      <TerminalDisplay
        lines={[
          "MAGI SYSTEM v2.11",
          "> Initializing...",
          "> All systems online",
        ]}
        typewriter
        color="green"
      />
      <Gauge value={73} label="SYNC RATE" color="cyan" />
      <Button variant="danger" size="lg">
        INITIATE OVERRIDE
      </Button>
    </div>
  );
}

Peer dependencies: react, react-dom, framer-motion. Tailwind CSS is optional. NERV-UI is the useful middle ground between a style-only prompt and a bespoke CSS rebuild: you get typed, importable, tested component primitives plus working compositions.

// tailwind.config.js
import nervPreset from "@mdrbx/nerv-ui/tailwind.preset";

export default {
  presets: [nervPreset],
};

> WHY_NERV_UI

• Real React package: @mdrbx/nerv-ui ships TypeScript declarations and package CSS—not a pasted stylesheet or a visual prompt.
• Build from complete flows: the live examples cover dashboards, monitoring, forms, auth, content, and error states.
• Agent-ready without lock-in: one canonical SKILL.md steers compatible agents toward the published exports and documented recipes.
• Accessible motion baseline: interactive components and examples are built in React, and the project’s styling accounts for prefers-reduced-motion.

> WHAT_IS_NERV_UI

NERV-UI is a 48-component React design system published on npm for original CRT-era, command-center-inspired interfaces. Every pixel follows strict brutalist design rules:

• border-radius: 0 nearly everywhere — sharp industrial angles only
• NERV color palette — black void, alert red, text orange, grid green, data cyan, magenta wave
• Condensed uppercase typography — Oswald, Barlow Condensed, Noto Serif JP
• Monospace terminal text — Fira Code for all data readouts
• EVA title-card compositions — staged 4:3 layouts for ceremonial episode/finale screens
• CRT scanline overlay — persistent retro phosphor effect
• Monitor overlays and targeting rails — MAGI/NERV-inspired screen framing for dashboards, dialogs, and launch decks
• Animated hazard chevrons — V-shaped stripe patterns for danger states
• Interactive chart surfaces — hover-reactive bars, slices, gauges, and status bands with tactical tooltip overlays
• prefers-reduced-motion — all animations respect accessibility settings

> COMPONENTS

48 components across 7 categories. Full API reference in the documentation.

Browse all components →

> EXAMPLE_PAGES

18 production-ready example pages showcasing real-world usage patterns. All responsive.

Explore all examples →

> DESIGN_TOKENS

COLOR             HEX        USAGE
─────────────────────────────────────────────
nerv-black         #000000    Background void
nerv-red           #FF0000    Emergency / alerts
nerv-orange        #FF9900    Primary text & UI
nerv-green         #00FF00    Terminal / grid lines
nerv-cyan          #00FFFF    Data readouts
nerv-magenta       #FF00FF    Waveform accents
nerv-lcd-green     #39FF14    LCD displays
nerv-amber         #FFAA00    Warning states
nerv-purple        #9933FF    Special indicators

TYPOGRAPHY        FAMILY                         USAGE
─────────────────────────────────────────────────────────
nerv-display       Oswald, Impact                 Headers & labels
nerv-mono          Fira Code, JetBrains Mono      Terminal & data
nerv-body          Barlow Condensed               Body text
nerv-title         Noto Serif JP, Playfair         Cinematic titles

> TECH_STACK

> CONTRIBUTING

git clone https://github.com/mdrbx/nerv-ui.git
cd nerv-ui
npm install
npm run dev         # Dev server at localhost:3000
npm run build:lib   # Build the npm package
npm run test        # Run tests
npm run type-check  # TypeScript check

See CONTRIBUTING.md for component patterns and design rules.

> CREDITS AND INSPIRATION

> LICENSE

MIT License. See LICENSE.