A modern React component library built on Base UI primitives with Tailwind CSS. Components are copied directly into your project via a CLI tool — no runtime dependency, full ownership of the code.
Initialize DinachiUI in your project:
npx @dinachi/cli@latest initAdd components:
npx @dinachi/cli@latest add button input cardOr add all components at once:
npx @dinachi/cli@latest add --all40+ accessible, composable components including:
Accordion, Alert Dialog, Autocomplete, Avatar, Badge, Button, Card, Checkbox, Collapsible, Combobox, Context Menu, Dialog, Drawer, Field, Fieldset, Form, Input, Menu, Menubar, Meter, Navigation Menu, Number Field, Popover, Preview Card, Progress, Radio, Scroll Area, Select, Separator, Sidebar, Slider, Switch, Tabs, Textarea, Toast, Toggle, and more.
- Base UI foundation — Accessible primitives with WAI-ARIA compliance
- Tailwind CSS styling — Semantic color tokens with light/dark mode support
- Copy-paste model — Components live in your project, fully customizable
- TypeScript — Strict mode with full type safety
- React 19 — Built for the latest React
- Tailwind CSS 3 & 4 — CLI auto-detects and configures for both versions
Visit dinachi.dev for full documentation, installation guides, and live examples.
Dinachi provides an installable agent skill for guided component decisions and generative UI planning.
Install the skill:
npx skills add https://github.com/raymond-UI/dinachiui --skill dinachi-assistant -yOptional global install:
npx skills add https://github.com/raymond-UI/dinachiui --skill dinachi-assistant -g -yAfter install, restart your agent app (Codex/Cursor/Claude Code) and invoke /dinachi-assistant or prompt naturally.
| Package | Description |
|---|---|
@dinachi/cli |
CLI tool for initializing and adding components |
@dinachi/components |
Component source (used internally by the CLI) |
@dinachi/core |
Shared utilities (cn, variants) and design tokens |
pnpm install
pnpm dev