Installation

NERV-UI is a React component library inspired by the NERV/MAGI interfaces from Neon Genesis Evangelion. Built with Tailwind CSS, Framer Motion, and fully typed in TypeScript.

Install the Package

[SRC]bash

1npm install @mdrbx/nerv-ui

[i]PEER DEPENDENCIES

NERV-UI requires React 18+, Framer Motion 11+, and optionally Tailwind CSS 3.4+ (or 4+). Install any missing peer dependencies:

[SRC]bash

1npm install react react-dom framer-motion
2npm install -D tailwindcss

Setup — Tailwind CSS 4

If you use Tailwind CSS 4, add the NERV-UI CSS theme tokens directly in your stylesheet:

[SRC]css

1@import "tailwindcss";
2@import "@mdrbx/nerv-ui/styles.css";
3
4@theme {
5  /* Core EVA Colors */
6  --color-nerv-black: #000000;
7  --color-nerv-red: #ff0000;
8  --color-nerv-orange: #ff9900;
9  --color-nerv-green: #00ff00;
10  --color-nerv-cyan: #00ffff;
11  --color-nerv-amber: #ffaa00;
12  --color-nerv-white: #e0e0e0;
13  --color-nerv-dark-gray: #1a1a1a;
14  --color-nerv-mid-gray: #333333;
15  --color-nerv-panel: #0a0a0a;
16  --color-nerv-purple: #9933ff;
17  --color-nerv-magenta: #ff00ff;
18  --color-nerv-lcd-green: #39ff14;
19
20  /* Semantic Aliases */
21  --color-bg-base: #000000;
22  --color-alert-red: #ff0000;
23  --color-text-orange: #ff9900;
24  --color-grid-green: #00ff00;
25  --color-data-blue: #00ffff;
26  --color-magenta-wave: #ff00ff;
27  --color-lcd-green: #39ff14;
28
29  /* Typography */
30  --font-nerv-display: "Oswald", "Impact", "Arial Narrow", system-ui, sans-serif;
31  --font-nerv-mono: "Fira Code", "JetBrains Mono", "Courier New", monospace;
32  --font-nerv-body: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
33  --font-nerv-title: "Noto Serif JP", "Playfair Display", "Georgia", serif;
34}

Setup — Tailwind CSS 3

If you use Tailwind CSS 3, use the included preset:

[SRC]js

1// tailwind.config.js
2module.exports = {
3  presets: [require("@mdrbx/nerv-ui/tailwind.preset")],
4  content: [
5    "./src/**/*.{js,ts,jsx,tsx}",
6    "./node_modules/@mdrbx/nerv-ui/dist/**/*.{js,mjs}",
7  ],
8};

Font Loading

Add the Google Fonts link to your layout.tsx or <head>:

[SRC]tsx

1<link
2  href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Fira+Code:wght@400;500;700&family=Barlow+Condensed:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;700;900&family=Playfair+Display:wght@400;700;900&display=swap"
3  rel="stylesheet"
4/>

Global Styles (Optional)

For the full NERV experience, add these global rules to enforce the brutalist aesthetic:

[SRC]css

1/* Zero border-radius — brutalist industrial */
2*,
3*::before,
4*::after {
5  border-radius: 0 !important;
6}
7
8/* CRT Scanline overlay */
9body::after {
10  content: "";
11  position: fixed;
12  inset: 0;
13  pointer-events: none;
14  z-index: 9999;
15  background: repeating-linear-gradient(
16    0deg,
17    transparent,
18    transparent 2px,
19    rgba(0, 0, 0, 0.03) 2px,
20    rgba(0, 0, 0, 0.03) 4px
21  );
22}
23
24/* Accessibility — respect reduced motion */
25@media (prefers-reduced-motion: reduce) {
26  *,
27  *::before,
28  *::after {
29    animation-duration: 0.01ms !important;
30    animation-iteration-count: 1 !important;
31    transition-duration: 0.01ms !important;
32  }
33  body::after {
34    display: none;
35  }
36}

Basic Usage

Import components directly from the package:

[SRC]tsx

1import {
2  EmergencyBanner,
3  Button,
4  TerminalDisplay,
5  DataGrid,
6  Gauge,
7} from "@mdrbx/nerv-ui";
8
9export default function MyPage() {
10  return (
11    <div className="bg-nerv-black min-h-screen p-8">
12      <EmergencyBanner text="ALERT" severity="warning" visible />
13      <Button variant="danger" size="lg">
14        INITIATE OVERRIDE
15      </Button>
16    </div>
17  );
18}

Available Components

NERV-UI ships dozens of components covering layout, data display, forms, overlays, charts, and military-style HUD elements:

| Category | Components | | ------------------ | ----------------------------------------------------------------------------------------------------------------------------- | | Layout | TargetingContainer, MonitorOverlay, HexGridBackground, Card, Accordion | | Data Display | TerminalDisplay, DataGrid, SyncProgressBar, SyncRatioChart, SegmentDisplay, PhaseStatusStack, GradientStatusBar | | Charts | BarChart, Gauge, PieChart | | Navigation | NavigationTabs, EmergencyBanner | | Forms | Button, InputField, SelectMenu | | Overlays | SystemDialog, ClassifiedOverlay, TitleScreen, NervToastProvider, StatusStamp | | HUD / Military | TargetingReticle, SurveillanceGrid, PatternAlert, PilotCard | | Special | MagiSystemPanel, CountdownTimer, SeeleMonolith, WireframeLoader |

[i]CAMERA OVERLAY SUB-FAMILY

PatternAlert, PilotCard, and bordered StatusStamp also belong to the dedicated camera-overlay grammar used for subject identification and signal-feed annotations. See Camera Overlay Grammar.

[!]CLIENT COMPONENTS

All components use the "use client" directive. They are designed for React Client Components (Next.js App Router, Vite, Create React App, etc.).

TypeScript

NERV-UI is fully typed. All prop interfaces are exported alongside their components:

[SRC]tsx

1import type { ButtonProps, DataGridColumn } from "@mdrbx/nerv-ui";