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.
• 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 18 and 19 are both supported.

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>
  );
}

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 | | 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 >= 22.14.0
• 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 (ESLint + Prettier)
pnpm size             # Check bundle size limits
pnpm chromatic        # Run visual regression tests

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.