# Cowork UI Kit — React Components
React component library for Cowork UI Kit v0.4. Atomic Design strict + HSL math relational color. TypeScript, Tailwind v3 preset, **0 hex hardcoded**.
> Gallery preview: https://ui.dang.pm/ → `_previews/index.html`
---
## Components
| Tier | Count | Components |
|------|-------|------------|
| atoms | 20 | Button, Input, Textarea, Select, Combobox, Checkbox, Radio, Switch, Badge, Avatar, Spinner, Progress, Skeleton, Tooltip, Popover, Divider, Icon, Kbd, Label, Helper |
| molecules | 10 | Card¹, FormGroup, Toast, Banner, Dropdown¹, SearchBar, Tabs¹, Breadcrumb, Pagination, Accordion¹ |
| organisms | 10 | Navbar, Sidebar, Modal, Drawer, CmdPalette, Hero, Pricing, FAQ, KPICard, DataTable |
¹ compound pattern (Component.Header, Component.Body, etc.)
---
## Install vào project
```bash
# Option A: Copy folder (đơn giản nhất)
cp -r 00-templates/ui-kit/react packages/ui
cd packages/ui && pnpm install
```
Peer deps consumer phải có sẵn: `react >= 18`, `react-dom >= 18`, `tailwindcss`.
---
## Wire Tailwind preset
```ts
// tailwind.config.ts
import coworkPreset from '@cowork/ui-kit/tokens/tailwind.preset.js';
export default {
presets: [coworkPreset],
content: ['./src/**/*.{ts,tsx}'],
};
```
---
## Import token CSS
```tsx
// Next.js: app/layout.tsx
import '@cowork/ui-kit/tokens/foundation.css';
import '@cowork/ui-kit/tokens/semantic.css';
import '@cowork/ui-kit/brands/khi.brand.css'; // chọn 1 brand
```
```tsx
// body: pick aesthetic
{/* or aesthetic-dark */}
```
Đổi brand → đổi 1 dòng import. Đổi vibe → đổi class trên body. Component không phải sửa gì.
---
## Usage
```tsx
import { Button, Badge, Avatar } from '@cowork/ui-kit-react/atoms';
import { Card, Tabs } from '@cowork/ui-kit-react/molecules';
import { Navbar, KPICard, DataTable } from '@cowork/ui-kit-react/organisms';
Dashboard
Overview
Metrics
...
...
```
---
## Architecture
```
react/
├── package.json ← TypeScript + clsx + tailwind-merge peer deps
├── tsconfig.json ← strict
├── src/
│ ├── index.ts ← barrel
│ ├── lib/cn.ts ← clsx + tw-merge util
│ ├── atoms/ ← 20 files + index.ts
│ ├── molecules/ ← 10 files + index.ts
│ └── organisms/ ← 10 files + index.ts
└── README.md ← bạn đang đọc
```
- No CSS-in-JS, no styled-components — Tailwind class composition only
- No runtime theme provider — CSS variables = brand swap zero JS
- Compound pattern: `Card.Header`, `Tabs.Trigger`, `Accordion.Item`...
- Internal state qua `useState` + `useEffect`. No external state lib
- A11y: `role="dialog"` / `aria-modal` / focus trap / ESC / outside-click / roving tabindex
---
## Verify trước commit
```bash
pnpm typecheck
# /kry-qc ui
```