> QUICK_START

npm install @mdrbx/nerv-ui

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.

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

export default {
  presets: [nervPreset],
};

> WHAT_IS_NERV_UI

NERV-UI is a 48-component React design system published on npm, built to replicate the iconic CRT-era military interfaces of NERV headquarters. 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.

| Category | Components | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Layout | TargetingContainer, HexGridBackground, MonitorOverlay, Card, Accordion, Divider, Drawer, Breadcrumb | | Forms | Button, InputField, SelectMenu, Checkbox, Toggle, Textarea, RadioGroup, FileUpload | | Data Display | TerminalDisplay, DataGrid, SyncProgressBar, SegmentDisplay, Badge, Skeleton, PilotCard, Pagination | | Charts | BarChart, Gauge, PieChart, SyncRatioChart, PhaseStatusStack, GradientStatusBar | | Overlays | SystemDialog, ClassifiedOverlay, TitleScreen, NervToastProvider, StatusStamp, Tooltip, DropdownMenu | | Navigation | NavigationTabs, EmergencyBanner, Stepper | | HUD / Military | TargetingReticle, SurveillanceGrid, PatternAlert, MagiSystemPanel, SeeleMonolith, CountdownTimer, WireframeLoader, ThemeProvider |

Browse all components →

> EXAMPLE_PAGES

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

| Page | Description | | ------------------------------------------------------------------------------ | ----------------------------------------- | | Command Center | NERV HQ main dashboard with live data | | Operations Dashboard | KPI cards, charts, gauges, operations log | | Comms Terminal | Military chat interface with channels | | Dispatch Form | Multi-field form with validation | | Intelligence Bulletin | Classified content feed with filtering | | Monitoring Station | Real-time sensor data & charts | | Video Intercept Deck | Aggressive surveillance wall with pilot channels, MAGI, and phase rails | | Equipment Requisition | CRUD inventory management | | Pilot Dossier | Personnel profiles with sync history | | Mission Report | After-action document template | | MAGI File System | File browser with tree navigation | | SaaS Landing | Marketing page with pricing | | Library Landing | NERV-UI showcase page | | Ceremonial Splash | Full-page EVA title-card splash screen | | Login | Authentication terminal | | Register | Personnel registration | | Help Center | FAQ with knowledge base | | Error 404 | Signal lost page |

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

| Technology | Version | Role | | ------------- | ------- | --------------------------------- | | React | 19 | Functional components with Hooks | | TypeScript | 5.8 | Strict typing, all props exported | | Tailwind CSS | 4 | @theme design tokens | | Framer Motion | 12 | Animations & transitions |

> 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 INPIRATION

> LICENSE

MIT License. See LICENSE.