Design System

The @grids/ui package provides a set of pre-built React 19 components styled with Tailwind CSS 4 for building Grids overlays. All components follow the dark theme (zinc/indigo palette) and are designed for transparent overlay rendering.

Installation

npm install @grids/ui

Import the base styles in your overlay's CSS:

@import "tailwindcss";
@import "@grids/ui/styles.css";

Components

Button

Interactive button with multiple variants and sizes.

import { Button } from '@grids/ui';

<Button variant="primary" size="md">Click Me</Button>
<Button variant="secondary" size="sm">Cancel</Button>
<Button variant="ghost" size="sm">✕</Button>
<Button variant="destructive">Delete</Button>
<Button disabled>Disabled</Button>

Props: variant (primary | secondary | ghost | destructive), size (sm | md | lg), plus all <button> attributes.

Card

Container with backdrop blur and border styling.

import { Card } from '@grids/ui';

<Card variant="surface" padding="md">Content here</Card>
<Card variant="raised" padding="lg">Elevated panel</Card>
<Card variant="ghost">Transparent wrapper</Card>

Props: variant (surface | raised | ghost), padding (none | sm | md | lg).

Badge

Inline status indicator with semantic colors.

import { Badge } from '@grids/ui';

<Badge variant="default">Default</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="success">Online</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Error</Badge>

Props: variant (default | accent | success | warning | destructive).

Input

Text input with optional label and error state.

import { Input } from '@grids/ui';

<Input placeholder="Search..." />
<Input label="Username" />
<Input label="Email" error="Invalid email address" />

Props: label?, error?, plus all <input> attributes.

ScrollArea

Styled scrollable container with thin custom scrollbar.

import { ScrollArea } from '@grids/ui';

<ScrollArea className="h-64">
  {/* Long content */}
</ScrollArea>

Spinner

Loading indicator with configurable size.

import { Spinner } from '@grids/ui';

<Spinner />
<Spinner size={32} />

Props: size (default: 20).

ProgressBar

Determinate or indeterminate progress indicator with optional label and detail text.

import { ProgressBar } from '@grids/ui';

<ProgressBar value={45} label="Downloading" detail="45%" />
<ProgressBar value={-1} label="Connecting..." />
<ProgressBar value={100} label="Complete" height={8} />

Props: value (0–100; pass -1 for indeterminate), label?, detail?, height? (px, default: 6).

Toast & ToastContainer

Notification toasts with auto-dismiss and type-based styling.

import { ToastContainer, type ToastData } from '@grids/ui';

const toasts: ToastData[] = [
  { id: '1', type: 'success', title: 'Saved!', duration: 3000 },
  { id: '2', type: 'error', title: 'Failed', message: 'Network error' },
];

<ToastContainer
  toasts={toasts}
  onDismiss={(id) => removeToast(id)}
  position="top-right"
/>

ToastData: id, type (info | success | warning | error), title, message?, duration? (ms, default 4000).

Positions: top-right | bottom-right | top-left | bottom-left.

ContextMenu

Positioned context menu with click-away detection.

import { ContextMenu } from '@grids/ui';

<ContextMenu
  displayName="Block"
  items={[
    { actionId: 'inspect', label: 'Inspect', icon: 'search', enabled: true, destructive: false },
    { actionId: 'delete', label: 'Delete', icon: 'trash', enabled: true, destructive: true },
  ]}
  screenX={300}
  screenY={200}
  onSelect={(actionId) => handleAction(actionId)}
  onDismiss={() => closeMenu()}
/>

Design Tokens

The design system uses CSS custom properties for theming:

Storybook

Browse all components interactively at ui.a-new-world.com.