NEXUS UI

Futuristic React components for data visualization

Dashboards that look like they belong in a command center, not a spreadsheet.

View Live Demo →

---

Why NEXUS UI?

Visualizations don't have to be boring. Most dashboards look the same - sterile grids of flat charts that get the job done but inspire nothing. Data deserves better. Visuals can be both professional and genuinely pleasing to look at. NEXUS UI is built on the belief that style and substance aren't mutually exclusive.

Agentic coding changes everything. Teams and developers are no longer beholden to the visualization platforms of old - tools with rigid templates, licensing headaches, and walls you hit the moment you want something custom. With AI-assisted development becoming the norm, building your own dashboard from composable components is not just feasible, it's preferable. You get full control, no vendor lock-in, and visuals that actually match your product.

Inspired by fiction, built for reality. NEXUS UI draws from the best of sci-fi and fictional interfaces - the holographic displays, the glowing data streams, the command centers that make you lean in. It's not a recreation of any single one. It pulls ideas and aesthetics from many and builds them into a cohesive, usable system with real component variants, theming, and accessibility in mind.

Built to grow. This library provides a foundation, but the vision is bigger than one set of components. If you're inspired to create your own variations - new chart types, new visual styles, new interaction patterns - contributions are welcome. The goal is a living collection of visualization components that breaks free from the "every dashboard looks like Tableau" mold.

Installation

Option 1: NPM Package

Install as a dependency and import what you need.

npm install forcetrainer/nexus-ui

import { Gauge, RadarChart, HoloPanel } from 'nexus-ui';
import 'nexus-ui/styles';

Pros: Simple setup, easy updates via npm. Cons: Can't modify component internals without forking.

Option 2: Copy & Own (shadcn-style)

Copy the source directly into your project. No dependency, full control.

your-project/
├── components/
│   └── nexus/          ← copy from src/components/nexus/
│       ├── Gauge.tsx
│       ├── RadarChart.tsx
│       ├── types.ts    ← required
│       └── ...
└── styles/
    ├── nexus-tokens.css     ← required
    └── nexus-components.css ← required

Then import directly from your own codebase:

import { Gauge } from '@/components/nexus';
import '@/styles/nexus-tokens.css';
import '@/styles/nexus-components.css';

Pros: Full control, modify anything, no external dependency. Cons: Manual updates - you pull changes yourself when you want them.

Running the Demo

git clone https://github.com/forcetrainer/nexus-ui.git
cd nexus-ui
npm install
npm run dev

The demo runs at http://localhost:3000 and showcases all available components.

Customization

NEXUS UI is themed via CSS custom properties. Override them to change the look without touching component code:

:root {
  /* Change the primary color from cyan to your brand */
  --nx-cyan: #your-color;
  --nx-cyan-glow: rgba(your-color, 0.4);

  /* Swap fonts */
  --nx-font-display: 'Your Display Font', sans-serif;
  --nx-font-mono: 'Your Mono Font', monospace;
  --nx-font-interface: 'Your UI Font', sans-serif;

  /* Adjust the base surface colors */
  --nx-void-base: #0a0a0a;
  --nx-void-surface: #1a1a2e;
}

Each component also accepts variant, size, className, and style props for per-instance control.

Components

import {
  // Containers
  HoloPanel, HoloCard,
  // Metrics & Progress
  MetricCounter, ProgressArc, ProgressBar, Gauge,
  // Charts
  Sparkline, RadarChart, AreaChart, BarChart, DonutChart, LineChart, Heatmap,
  // Real-Time
  Waveform, LogViewer, QueueVisualizer,
  // Status
  StatusIndicator, AlertCallout,
  // Specialized
  HexGrid, RadarScan, DataGrid, Timeline, Loader,
  // Controls
  Toggle, RangeSlider, SegmentedControl, SearchInput,
} from 'nexus-ui';

Full props reference and examples: COMPONENTS.md

Categories:

• Containers - HoloPanel, HoloCard
• Metrics - MetricCounter
• Progress - ProgressArc, ProgressBar
• Charts - Sparkline, RadarChart, AreaChart, BarChart, DonutChart, LineChart, Heatmap
• Real-Time - Waveform, LogViewer, QueueVisualizer
• Status - StatusIndicator, AlertCallout
• Specialized - HexGrid, Gauge, RadarScan, DataGrid, Timeline, Loader
• Controls - Toggle, RangeSlider, SegmentedControl, SearchInput

Design System

Six color variants: cyan | blue | violet | green | amber | red

Four sizes: sm | md | lg | xl

Typography powered by Orbitron (display), JetBrains Mono (monospace), and Exo 2 (interface).

License

PolyForm Noncommercial 1.0.0 - Free for personal, educational, and non-commercial use. Commercial use requires a separate license. See the LICENSE file for details.