Tailwind

The library is styled with Tailwind v4 internally, but ships compiled CSS. You do not need Tailwind. If your project uses it, you can map the same tokens into your own theme.

Without Tailwind

Nothing to do. jarvis-react-ui/style.css contains everything the components need. Write your own styles with the CSS variables:

.my-card {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

Warning: Don't use the utility classes without Tailwind

The stylesheet also contains some Tailwind utility classes (flex, h-[120px], ...), but only the ones the components happen to use internally. They are not part of the public API: most utilities are missing, and the set changes between releases. Without Tailwind in your project, do not put utility classes in your own markup. Use Stack and Grid for layout and your own CSS classes with the tokens, as above.

The docs demos use Tailwind utilities for their layout (flex gap-3, w-[280px], ...). Without Tailwind, replace them with Stack, Grid or your own CSS when you copy a demo; the component props stay the same.

With Tailwind v4

Map the tokens in your @theme block to get utilities like bg-surface, text-accent or border-border that follow runtime overrides:

@import 'tailwindcss';

@theme {
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-border: var(--border);
    --color-accent: var(--accent);
    --color-accent-bright: var(--accent-bright);
    --color-text: var(--text);
    --color-text-secondary: var(--text-secondary);
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

Import jarvis-react-ui/style.css before your Tailwind entry. Both stylesheets contain the preflight reset; that is harmless.

What follows runtime overrides