@masterdeepak15/jarvis-ui

HUD-style React component library — sci-fi / military aesthetic with dark themes, animated SVG, radial menus, draggable node graphs, and 50+ components.

Live demo: https://jarvis-ui-docs.vercel.app/

Installation

npm install @masterdeepak15/jarvis-ui
# or
pnpm add @masterdeepak15/jarvis-ui
# or
yarn add @masterdeepak15/jarvis-ui

Peer dependencies (must already be in your project):

npm install react react-dom

Setup

Import the stylesheet once at your app root:

// main.tsx or App.tsx
import '@masterdeepak15/jarvis-ui/styles'

Wrap your app with JThemeProvider:

import { JThemeProvider } from '@masterdeepak15/jarvis-ui'

function App() {
  return (
    <JThemeProvider>
      {/* your app */}
    </JThemeProvider>
  )
}

Components

Theme

| Component | Description | |-----------|-------------| | JThemeProvider | Root context — wraps the app, provides useTheme() | | JThemePicker | Floating color-scheme switcher (6 presets) |

Layout

| Component | Description | |-----------|-------------| | JHudBar | Top / bottom HUD bar with waveform, ticks, REC indicator | | JHudFrame | Corner-bracket framing container | | JHudFrameCard | Card with HUD border styling | | JPageLayout | Full-page layout with sidebar + HUD bars | | JSidebar | Left navigation sidebar | | JNavItem | Sidebar nav link / button | | JSpinner | Arc spinner with optional label |

UI Controls

| Component | Description | |-----------|-------------| | JButton | Parallelogram / notch buttons in 7 colors | | JInput | HUD-styled text input | | JTextArea | Multi-line text input | | JSelect | Custom dropdown select | | JCheckbox | Animated checkbox | | JRadio | Radio button | | JToggle | On/off toggle switch | | JSlider | Range slider | | JDatePicker | Calendar date picker | | JDateRangePicker | Date range picker | | JTimePicker | Time picker | | JFormField | Form field wrapper with label / error / hint |

Display

| Component | Description | |-----------|-------------| | JBadge | Inline badge chip (7 colors, blink mode) | | JStatusPill | Status dot + label pill | | JProgress | Linear / segmented progress bar | | JHudLabel | Labelled data pair | | JDivider | Horizontal / vertical divider | | JAlert | Dismissable alert banner | | JDataRow | Key-value data row | | JCard | General-purpose card container | | JStatCard | Metric stat card with data rows | | JModal | Overlay modal dialog | | JTabs + JTab | Tab navigation | | JAccordion | Expand/collapse accordion | | JPagination | Page navigation |

HUD Visualizations

| Component | Description | |-----------|-------------| | JArcMeter | Animated arc meter gauge | | JWaveform | Animated audio waveform bars | | JOrb | Pulsing orb with glow rings |

Interactive

| Component | Description | |-----------|-------------| | JCommandPalette | Spotlight-style command palette with fuzzy filter | | JTable | Data table with state badges, hover, footer | | JBootScreen | 5-phase animated boot sequence overlay | | JRadialMenu + JRadialItem | Spring fly-out radial navigation ring | | JNodeGraph | Draggable node graph with SVG bezier edges |

Charts (via Recharts)

| Component | Description | |-----------|-------------| | JSparkline | Mini trend line | | JBarChart | Vertical bar chart | | JLineChart | Line / area chart | | JDonutChart | Donut / pie chart | | JGaugeChart | Radial gauge | | JRadarChart | Radar / spider chart |

Toast

| Component | Description | |-----------|-------------| | JToastProvider + useToast | Toast notification system |

Quick Examples

Button

import { JButton } from '@masterdeepak15/jarvis-ui'

<JButton color="cyan" shape="LeftNotch" onClick={() => console.log('clicked')}>
  ENGAGE
</JButton>

Radial Menu

import { JRadialMenu, JRadialItem } from '@masterdeepak15/jarvis-ui'

const [open, setOpen] = useState(false)

<JRadialMenu open={open} onOpenChange={setOpen} triggerLabel="MENU">
  <JRadialItem icon="⊞" label="Dashboard" angle={0}   onClick={() => navigate('/dash')} />
  <JRadialItem icon="⚡" label="Skills"    angle={72}  onClick={() => navigate('/skills')} />
  <JRadialItem icon="⚙" label="Settings"  angle={144} onClick={() => navigate('/settings')} />
  <JRadialItem icon="📡" label="Network"   angle={216} onClick={() => navigate('/net')} />
  <JRadialItem icon="🔊" label="Audio"     angle={288} onClick={() => navigate('/audio')} />
</JRadialMenu>

Node Graph

import { JNodeGraph } from '@masterdeepak15/jarvis-ui'
import type { NodeDef, EdgeDef } from '@masterdeepak15/jarvis-ui'

const nodes: NodeDef[] = [
  { id: 'hub',  label: 'CORE',   x: 300, y: 180, type: 'hub' },
  { id: 'n1',   label: 'SENSOR', x: 60,  y: 60,  pulse: true },
  { id: 'n2',   label: 'CAMERA', x: 60,  y: 180, color: 'amber' },
  { id: 'out',  label: 'OUTPUT', x: 520, y: 180, type: 'hex', color: 'green' },
]
const edges: EdgeDef[] = [
  { from: 'n1', to: 'hub' },
  { from: 'n2', to: 'hub', color: 'amber' },
  { from: 'hub', to: 'out', color: 'green', animDur: 1.2 },
]

<JNodeGraph nodes={nodes} edges={edges} title="SYSTEM MAP" height="400px" />

Boot Screen

import { JBootScreen } from '@masterdeepak15/jarvis-ui'

<JBootScreen
  systemName="NEXUS"
  version="v2.0.0"
  onComplete={() => setBooted(true)}
/>

Command Palette

import { JCommandPalette } from '@masterdeepak15/jarvis-ui'
import type { JCommand } from '@masterdeepak15/jarvis-ui'

const commands: JCommand[] = [
  { key: 'dash',     label: 'Dashboard',   group: 'Navigate', icon: '⊞' },
  { key: 'settings', label: 'Settings',    group: 'Navigate', icon: '⚙' },
  { key: 'theme',    label: 'Change Theme', group: 'Actions',  icon: '🎨' },
]

<JCommandPalette
  visible={paletteOpen}
  onClose={() => setPaletteOpen(false)}
  commands={commands}
  onExecute={(cmd) => handleCommand(cmd.key)}
/>

Theming

JARVIS UI ships 6 built-in color presets:

| Preset | Accent color | |--------|-------------| | cyan (default) | #00e5ff | | amber | #f97316 | | green | #22c55e | | red | #ef4444 | | blue | #3b82f6 | | violet | #8b5cf6 |

import { JThemeProvider } from '@masterdeepak15/jarvis-ui'

<JThemeProvider preset="amber">
  {/* everything glows amber */}
</JThemeProvider>

Or switch at runtime:

import { useTheme } from '@masterdeepak15/jarvis-ui'

const { setPreset } = useTheme()
setPreset('green')

CSS Variables

All colors are CSS custom properties. Override any of them in your own stylesheet:

:root {
  --j-accent:    #00e5ff;  /* primary accent color */
  --j-bg:        #050a0f;  /* page background */
  --j-bg-card:   #0a1520;  /* card background */
  --j-text-primary: #e2e8f0;
}

TypeScript

Full TypeScript support — all props, types, and enums are exported:

import type {
  JColor, JSize, JState, JVariant,
  NodeDef, EdgeDef, NType, EdgeStyle,
  JCommand, JTableColumn, JTableRow,
  JRadialItemDef,
} from '@masterdeepak15/jarvis-ui'

License

MIT © Deepak Chougale