A React component UI library that recreates the NERV headquarters interfaces from Evangelion.
npm install @mdrbx/nerv-uiimport { 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 CSS preset (optional)
// tailwind.config.js
import nervPreset from "@mdrbx/nerv-ui/tailwind.preset";
export default {
presets: [nervPreset],
};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: 0nearly 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
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 |
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 |
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
| 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 |
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 checkSee CONTRIBUTING.md for component patterns and design rules.
I made this project because I thought it would be fun. A huge thanks to all the people who created and inspired the great Neon Genesis Evangelion anime over the years. This is a tribute, and I hope it will be perceived as a good one.
MADE WITH [REDACTED] BY mdrbx
MIT License. See LICENSE.