{"id":20127653,"url":"https://github.com/cube-js/cube-ui-kit","last_synced_at":"2026-06-05T16:00:52.099Z","repository":{"id":36959201,"uuid":"396675833","full_name":"cube-js/cube-ui-kit","owner":"cube-js","description":"UI Framework for Cube Projects. Based on React Aria and tasty style engine.","archived":false,"fork":false,"pushed_at":"2026-06-05T14:06:49.000Z","size":13372,"stargazers_count":43,"open_issues_count":3,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-06-05T15:22:05.333Z","etag":null,"topics":["components","design-system","react","react-aria","storybook","uikit"],"latest_commit_sha":null,"homepage":"https://cube-ui-kit.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cube-js.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2021-08-16T07:32:46.000Z","updated_at":"2026-06-05T14:04:49.000Z","dependencies_parsed_at":"2023-10-03T15:41:44.664Z","dependency_job_id":"c0849eaf-35e4-40e0-8598-6be5babb7363","html_url":"https://github.com/cube-js/cube-ui-kit","commit_stats":null,"previous_names":[],"tags_count":433,"template":false,"template_full_name":null,"purl":"pkg:github/cube-js/cube-ui-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcube-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcube-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcube-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcube-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cube-js","download_url":"https://codeload.github.com/cube-js/cube-ui-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cube-js%2Fcube-ui-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33949039,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","design-system","react","react-aria","storybook","uikit"],"created_at":"2024-11-13T20:23:08.680Z","updated_at":"2026-06-05T16:00:51.699Z","avatar_url":"https://github.com/cube-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cube UI Kit\n\n[![npm version](https://img.shields.io/npm/v/@cube-dev/ui-kit.svg)](https://www.npmjs.com/package/@cube-dev/ui-kit)\n[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/cube-js/cube-ui-kit/blob/main/LICENSE)\n\nAn open-source React component library that powers [Cube Cloud](https://cubecloud.dev) and other [Cube Dev](https://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.\n\n**[Live Storybook](https://cube-ui-kit.vercel.app/)** · **[Tasty Docs](https://github.com/tenphi/tasty)**\n\n## Highlights\n\n- **100+ production-ready components** — primitives (Button, Input), layout (Grid, Flex, Space), fields (Select, ComboBox, DatePicker), overlays (Dialog, Toast), and complex organisms (CommandMenu, FilterPicker, FileTabs).\n- **Accessible by default** — built on [React Aria](https://react-spectrum.adobe.com/react-aria/) with keyboard navigation, focus management, and screen reader support out of the box.\n- **Tasty styling engine** — declarative, token-aware styles with state-driven values, design tokens, responsive breakpoints, and zero specificity conflicts. See the [Tasty documentation](https://github.com/tenphi/tasty).\n- **Integrated form system** — async rule-based validation with field-level and form-level state management; fields plug in directly without extra wrapper components.\n- **TypeScript-first** — complete type definitions with autocomplete for tokens and style props.\n- **Tree-shakeable** — unbundled ESM output; import only what you use.\n\n## Installation\n\n```bash\npnpm add @cube-dev/ui-kit\n```\n\nPeer dependencies:\n\n```bash\npnpm add react react-dom\n```\n\nReact 18 and 19 are both supported.\n\n## Quick Start\n\nWrap your application with `Root` to initialize the design system:\n\n```tsx\nimport { Root, Button, TextInput, Space } from '@cube-dev/ui-kit';\n\nfunction App() {\n  return (\n    \u003cRoot\u003e\n      \u003cSpace flow=\"column\" gap=\"2x\" padding=\"4x\"\u003e\n        \u003cTextInput label=\"Name\" placeholder=\"Enter your name\" /\u003e\n        \u003cButton type=\"primary\" onPress={() =\u003e console.log('clicked')}\u003e\n          Submit\n        \u003c/Button\u003e\n      \u003c/Space\u003e\n    \u003c/Root\u003e\n  );\n}\n```\n\n## Components\n\n| Category | Components |\n|----------|------------|\n| **Layout** | Flex, Grid, Space, Flow, Panel, ResizablePanel, Prefix, Suffix |\n| **Actions** | Button, Button.Group, Button.Split, Link, Menu, CommandMenu |\n| **Content** | Text, Title, Paragraph, Card, Badge, Tag, Avatar, Alert, Skeleton, Placeholder, Disclosure, Divider, CopySnippet, PrismCode |\n| **Fields** | TextInput, NumberInput, PasswordInput, SearchInput, TextArea, Select, ComboBox, Checkbox, RadioGroup, Switch, Slider, DatePicker, FileInput, ListBox, FilterListBox, FilterPicker, Picker |\n| **Form** | Form, FieldWrapper, SubmitButton, ResetButton |\n| **Overlays** | Dialog, AlertDialog, Modal, Tooltip, Toast, Notifications |\n| **Navigation** | Tabs, FileTabs |\n| **Status** | Spin, LoadingAnimation |\n\nBrowse all components with live examples in the [Storybook](https://cube-ui-kit.vercel.app/).\n\n## Styling with Tasty\n\nCube UI Kit uses [Tasty](https://github.com/tenphi/tasty) — a styling engine that generates conflict-free CSS using mutually exclusive selectors.\n\nCreate custom styled components:\n\n```tsx\nimport { tasty } from '@cube-dev/ui-kit';\n\nconst Card = tasty({\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    padding: '4x',\n    gap: '2x',\n    fill: '#surface',\n    border: '#border',\n    radius: '1r',\n\n    Title: { preset: 'h3', color: '#primary' },\n    Content: { preset: 't2', color: '#text' },\n  },\n  elements: { Title: 'h2', Content: 'div' },\n});\n```\n\nStyle properties support state-driven values:\n\n```tsx\nconst StatusBadge = tasty({\n  styles: {\n    padding: '1x 2x',\n    radius: 'round',\n    fill: {\n      '': '#surface',\n      'type=success': '#success-bg',\n      'type=error': '#danger-bg',\n    },\n  },\n});\n```\n\n## Development\n\n### Prerequisites\n\n- Node.js \u003e= 22.14.0\n- pnpm \u003e= 10\n\n### Scripts\n\n```bash\npnpm storybook        # Start Storybook dev server on port 6060\npnpm build            # Build the library (tsdown, unbundled ESM)\npnpm test             # Run all tests (Vitest)\npnpm test -- Button   # Run tests matching \"Button\"\npnpm fix              # Lint and format (ESLint + Prettier)\npnpm size             # Check bundle size limits\npnpm chromatic        # Run visual regression tests\n```\n\n### Project Structure\n\n```\nsrc/\n├── components/\n│   ├── actions/       # Button, Link, Menu, CommandMenu, ...\n│   ├── content/       # Card, Badge, Tag, Alert, Skeleton, ...\n│   ├── fields/        # TextInput, Select, ComboBox, ...\n│   ├── form/          # Form, FieldWrapper, SubmitButton, ...\n│   ├── layout/        # Flex, Grid, Space, Flow, Panel, ...\n│   ├── navigation/    # Tabs\n│   ├── organisms/     # FileTabs, StatsCard\n│   ├── overlays/      # Dialog, Tooltip, Toast, ...\n│   └── status/        # Spin, LoadingAnimation\n├── icons/             # 130+ icon components (Tabler-based + custom)\n├── stories/           # Storybook guides and documentation\n├── tasty/             # Tasty integration utilities\n├── tokens/            # Design tokens\n└── index.ts           # Public API barrel export\ndocs/\n└── tasty/             # Tasty styling engine documentation\n```\n\nEach component follows a standard file layout:\n\n```\nComponentName/\n├── ComponentName.tsx          # Implementation\n├── ComponentName.stories.tsx  # Storybook stories\n├── ComponentName.docs.mdx     # Documentation\n├── ComponentName.test.tsx     # Tests\n└── index.tsx                  # Re-exports\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for commit conventions, branch naming, PR workflow, and changeset instructions.\n\n## License\n\n[MIT](./LICENSE) — Cube Dev, Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcube-js%2Fcube-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcube-js%2Fcube-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcube-js%2Fcube-ui-kit/lists"}