Cube UI Kit

An open-source React component library that powers Cube Cloud and other Cube Dev products. While built for Cube's own interfaces, it is a general-purpose kit you can use freely in any application where it fits your needs.

Live Storybook · Tasty Docs

Highlights

• 100+ production-ready components — primitives (Button, Input), layout (Grid, Flex, Space), fields (Select, ComboBox, DatePicker), overlays (Dialog, Toast), and complex organisms (CommandMenu, FilterPicker, FileTabs).
• Accessible by default — built on React Aria with keyboard navigation, focus management, and screen reader support out of the box.
• Tasty styling engine — declarative, token-aware styles with state-driven values, design tokens, responsive breakpoints, and zero specificity conflicts. See the Tasty documentation.
• Integrated form system — async rule-based validation with field-level and form-level state management; fields plug in directly without extra wrapper components.
• Runtime-tunable palette — the whole color system is generated by Glaze from a brand hue, a saturation and one hue per status theme. Re-seed any of them at runtime and every token re-resolves for light, dark and high-contrast at once.
• TypeScript-first — complete type definitions with autocomplete for tokens and style props.
• Tree-shakeable — unbundled ESM output; import only what you use.

Installation

pnpm add @cube-dev/ui-kit

Peer dependencies:

pnpm add react react-dom

React and React DOM 19.3 or newer are required (React 19). Upgrade both together before adopting this release. UI Kit ships compiled output using the native React compiler runtime; applications do not need to enable React Compiler.

Quick Start

Wrap your application with Root to initialize the design system:

import { Root, Button, TextInput, Space } from '@cube-dev/ui-kit';

function App() {
  return (
    <Root>
      <Space flow="column" gap="2x" padding="4x">
        <TextInput label="Name" placeholder="Enter your name" />
        <Button type="primary" onPress={() => console.log('clicked')}>
          Submit
        </Button>
      </Space>
    </Root>
  );
}

To ship your own brand color, tune the palette seeds — every token, in every scheme, re-resolves from them:

<Root palette={{ hue: 210, saturation: 72, themes: { danger: { hue: 12 } } }}>
  <App />
</Root>

setPaletteConfig() does the same thing imperatively, from anywhere. It replaces rather than accumulates, like useState — pass an updater to change one field:

setPaletteConfig((config) => ({ ...config, hue: 235 }));

Components

Category	Components
Layout	Flex, Grid, Space, Flow, Panel, ResizablePanel, Prefix, Suffix
Actions	Button, Button.Group, Button.Split, Link, Menu, CommandMenu
Content	Text, Title, Paragraph, Card, Badge, Tag, Avatar, Alert, Skeleton, Placeholder, Disclosure, Divider, CopySnippet, PrismCode
Fields	TextInput, NumberInput, PasswordInput, SearchInput, TextArea, Select, ComboBox, Checkbox, RadioGroup, Switch, Slider, DatePicker, FileInput, ListBox, FilterListBox, FilterPicker, Picker, TagInput
Form	Form, FieldWrapper, SubmitButton, ResetButton
Overlays	Dialog, AlertDialog, Modal, Tooltip, Toast, Notifications
Navigation	Tabs, FileTabs
Status	Spin, LoadingAnimation

Browse all components with live examples in the Storybook.

Styling with Tasty

Cube UI Kit uses Tasty — a styling engine that generates conflict-free CSS using mutually exclusive selectors.

Create custom styled components:

import { tasty } from '@cube-dev/ui-kit';

const Card = tasty({
  styles: {
    display: 'flex',
    flow: 'column',
    padding: '4x',
    gap: '2x',
    fill: '#surface',
    border: '#border',
    radius: '1r',

    Title: { preset: 'h3', color: '#primary' },
    Content: { preset: 't2', color: '#text' },
  },
  elements: { Title: 'h2', Content: 'div' },
});

Style properties support state-driven values:

const StatusBadge = tasty({
  styles: {
    padding: '1x 2x',
    radius: 'round',
    fill: {
      '': '#surface',
      'type=success': '#success-bg',
      'type=error': '#danger-bg',
    },
  },
});

Development

Prerequisites

• Node.js 24 (see .nvmrc)
• pnpm >= 10

Scripts

pnpm storybook        # Start Storybook dev server on port 6060
pnpm build            # Build the library (tsdown, unbundled ESM)
pnpm test             # Run all tests (Vitest)
pnpm test -- Button   # Run tests matching "Button"
pnpm fix              # Lint and format (Oxlint + Prettier)
pnpm size             # Measure the bundle and check its dependencies
pnpm chromatic        # Run visual regression tests

Agent reviews

Local agent reviews follow the UI Kit review rules, including Entropy review. Use $ui-review in Codex or /ui-review in Claude for a full review, and $entropy-review or /entropy-review respectively for a focused complexity assessment.

Project Structure

src/
├── components/
│   ├── actions/       # Button, Link, Menu, CommandMenu, ...
│   ├── content/       # Card, Badge, Tag, Alert, Skeleton, ...
│   ├── fields/        # TextInput, Select, ComboBox, ...
│   ├── form/          # Form, FieldWrapper, SubmitButton, ...
│   ├── layout/        # Flex, Grid, Space, Flow, Panel, ...
│   ├── navigation/    # Tabs
│   ├── organisms/     # FileTabs, StatsCard
│   ├── overlays/      # Dialog, Tooltip, Toast, ...
│   └── status/        # Spin, LoadingAnimation
├── icons/             # 130+ icon components (Tabler-based + custom)
├── stories/           # Storybook guides and documentation
├── tasty/             # Tasty integration utilities
├── tokens/            # Design tokens
└── index.ts           # Public API barrel export
docs/
└── tasty/             # Tasty styling engine documentation

Each component follows a standard file layout:

ComponentName/
├── ComponentName.tsx          # Implementation
├── ComponentName.stories.tsx  # Storybook stories
├── ComponentName.docs.mdx     # Documentation
├── ComponentName.test.tsx     # Tests
└── index.tsx                  # Re-exports

Contributing

See CONTRIBUTING.md for commit conventions, branch naming, PR workflow, and changeset instructions.

License

MIT — Cube Dev, Inc.