chaos-design-ui

Enterprise component design system built with React 19, Tailwind CSS 4, and shadcn/ui.

Installation

pnpm add chaos-design-ui
# or
npm install chaos-design-ui
# or
yarn add chaos-design-ui

Peer Dependencies

This package requires the following peer dependencies:

pnpm add react react-dom next next-themes next-intl tailwindcss

| Package | Version | |---------|---------| | react | >=19.0.0 | | react-dom | >=19.0.0 | | next | >=16.0.0 | | next-themes | >=0.4.0 | | next-intl | >=4.0.0 | | tailwindcss | >=4.0.0 |

Quick Start

1. Import styles

Add the CSS import to your app's entry point (e.g., app/layout.tsx):

import "chaos-design-ui/styles.css"

2. Use components

import { Button, Card, Dialog } from "chaos-design-ui"

export default function Page() {
  return (
    <Card>
      <Button>Click me</Button>
      <Dialog>
        <Dialog.Trigger>Open dialog</Dialog.Trigger>
        <Dialog.Content>Hello world</Dialog.Content>
      </Dialog>
    </Card>
  )
}

3. Import specific components (tree-shakeable)

import { Button } from "chaos-design-ui/components/ui/button"
import { DataTable } from "chaos-design-ui/components/business/data-table"

Component Categories

• UI Components (66): Buttons, inputs, dialogs, tables, navigation, etc.
• Business Components (~150): Data tables, charts, calendars, forms, workflows, mobile components, etc.
• Layout Components (9): App shell, dashboard layout, auth layout, etc.
• Hooks (27): useAsync, useDebounce, useFormAutosave, useIntersectionObserver, etc.

Features

• React 19 + TypeScript strict mode
• Tailwind CSS 4
• ESM-only, tree-shakeable
• Full TypeScript declarations
• shadcn/ui compatible
• Mobile-first responsive design
• Enterprise patterns (auth, workflows, data visualization)

License

MIT