Usage

Components are plain React components with typed props. Compose them like any other UI kit; the HUD look comes from the shared design tokens.

Wrap your app

Mount JarvisProvider once at the root. It sets up UI sounds, toasts and the useJarvis() controls:

// main.tsx
import 'jarvis-react-ui/style.css';
import { createRoot } from 'react-dom/client';
import { JarvisProvider } from 'jarvis-react-ui';
import { App } from './App';

createRoot(document.getElementById('root') as HTMLElement).render(
    <JarvisProvider>
        <App />
    </JarvisProvider>,
);

A first panel

import { Button, Metric, Panel, Pill, useToast } from 'jarvis-react-ui';

export function App() {
    const { toast } = useToast();
    return (
        <Panel title="System">
            <Metric value={42} unit="%" />
            <Pill variant="ok">online</Pill>
            <Button onClick={() => toast({ variant: 'success', title: 'Diagnostics passed' })}>
                Run diagnostics
            </Button>
        </Panel>
    );
}

Dark background

The components are designed for the dark JARVIS background. Give your page the background token so everything sits on the right surface:

body {
    background: var(--bg);
    color: var(--text);
}

For the full HUD look, add the decorative layers GridBackground, Scanlines and ViewportCorners, or the complete HUDShell frame.

Layout

The components bring their own styles; the layout around them is yours. Size and place them with className and your own CSS (or Tailwind, if your project uses it):

.reactor-panel {
    width: 320px;
    height: 220px;
}

For rows, columns and grids use Stack and Grid: they space their children with the design tokens and need no Tailwind.

<Stack direction="row" align="center" gap="sm">
    <Pill variant="ok">online</Pill>
    <Button>Run diagnostics</Button>
</Stack>

The demos on these pages lay themselves out with Tailwind utilities such as flex gap-3. Without Tailwind in your project, replace those with Stack, Grid or your own CSS: the utility classes inside style.css are an internal subset and not meant for your markup (see Tailwind).

Props and refs

• Every component accepts className, merged onto its root element.
• Components that wrap a native element (Button, IconButton, Input, Link, Switch) accept that element's attributes (onClick, disabled, aria-*, ...) and forward their ref.
• Controlled and uncontrolled modes follow React conventions: value / defaultValue with onValueChange (Tabs), checked / defaultChecked with onCheckedChange (Switch).

Each component page ends with an API table generated from the TypeScript types, so it always matches the source.

Client-side routing

Links and navigation entries render real <a> elements. To use them with a router, prevent the default navigation and call your router instead:

import { useNavigate } from 'react-router';
import { NavList } from 'jarvis-react-ui';

export function Sidebar() {
    const navigate = useNavigate();
    return (
        <NavList
            groups={groups}
            onItemClick={(item, event) => {
                event.preventDefault();
                navigate(item.href);
            }}
        />
    );
}

This documentation site is built exactly like that, using only jarvis-react-ui components.

TypeScript

All props, variants and helper types are exported next to their component:

import type { ButtonProps, ButtonVariant, TableColumn } from 'jarvis-react-ui';