# DinachiUI

> Production-ready React component library built on Base UI with Tailwind CSS. Copy-paste components with full ownership via CLI.

DinachiUI provides 63 accessible React components that you install directly into your project using a CLI tool. Components are built on Base UI primitives for accessibility, styled with Tailwind CSS, and fully customizable.

They come in two tiers. The core tier is 44 components built on Base UI; `npx @dinachi/cli@latest add --all` installs all of them. The motion tier is 19 animated components that depend on [motion](https://motion.dev) and install separately with `npx @dinachi/cli@latest add --motion`. Naming a motion component installs it on its own either way.

## Getting Started

- [Installation](https://dinachi.dev/docs/installation): Get started with any React framework
- [Next.js Guide](https://dinachi.dev/docs/installation/nextjs): Step-by-step Next.js setup
- [Vite Guide](https://dinachi.dev/docs/installation/vite): Step-by-step Vite setup
- [CLI Reference](https://dinachi.dev/docs/cli): CLI commands and configuration

## Documentation

- [Command Line Interface](https://dinachi.dev/docs/cli): CLI tool that copies component source code directly into your project for full ownership and customization.
- [Design Conventions](https://dinachi.dev/docs/conventions): Key conventions and patterns used in DinachiUI components.
- [Next.js Installation](https://dinachi.dev/docs/installation/nextjs): Set up DinachiUI in a Next.js project with App Router and Tailwind CSS.
- [Vite Installation](https://dinachi.dev/docs/installation/vite): Set up DinachiUI in a Vite + React project with TypeScript and Tailwind CSS.
- [Installation](https://dinachi.dev/docs/installation): Get started with DinachiUI using your preferred React framework or setup.
- [Component Reference](https://dinachi.dev/docs/integrations/json-render/component-reference): Full reference for all JSON Render components — layout, form, display, and overlay elements with props and usage examples.
- [JSON Render](https://dinachi.dev/docs/integrations/json-render): Render DinachiUI interfaces from JSON specs. Define layouts, forms, and interactive UIs as data — ideal for AI-generated interfaces.
- [AI Skills](https://dinachi.dev/docs/skills): Install and use the Dinachi assistant skill in Codex, Cursor, and Claude Code.
- [Theming & Colors](https://dinachi.dev/docs/theming): DinachiUI's semantic color system and how to customize it.

## Components

- [Accordion](https://dinachi.dev/docs/components/accordion): A vertically stacked set of interactive headings that each reveal an associated section of content.
- [Alert Dialog](https://dinachi.dev/docs/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response. Ideal for confirmations and destructive actions.
- [Animated Icon](https://dinachi.dev/docs/components/animated-icon): Two icons in one place, trading with a transition instead of a swap.
- [Animated List](https://dinachi.dev/docs/components/animated-list): A list that animates entrances, exits, and the rows displaced by both.
- [Animated Tabs](https://dinachi.dev/docs/components/animated-tabs): Tabs whose active pill travels between triggers instead of cutting.
- [Autocomplete](https://dinachi.dev/docs/components/autocomplete): A text input with dynamic suggestions that helps users find and select values quickly.
- [Avatar](https://dinachi.dev/docs/components/avatar): An image element with a fallback for representing a user. Supports multiple sizes and graceful loading states.
- [Badge](https://dinachi.dev/docs/components/badge): A small visual indicator for labeling, categorizing, or displaying status information.
- [Button](https://dinachi.dev/docs/components/button): A customizable button component with multiple variants and sizes. Built with accessibility in mind.
- [Card](https://dinachi.dev/docs/components/card): A versatile card component for grouping related content and actions. Supports headers, footers, and flexible layouts.
- [Carousel](https://dinachi.dev/docs/components/carousel): A carousel that snaps to where the flick was aimed, not to where it stopped.
- [Checkbox](https://dinachi.dev/docs/components/checkbox): A checkbox component with support for checked, unchecked, and indeterminate states. Built with accessibility in mind.
- [Checkbox Group](https://dinachi.dev/docs/components/checkbox-group): A group component for managing multiple checkboxes with shared state. Supports controlled and uncontrolled usage.
- [Collapsible](https://dinachi.dev/docs/components/collapsible): An interactive component that expands and collapses a section of content.
- [Combobox](https://dinachi.dev/docs/components/combobox): A combobox that combines text input with a selectable popup list of options.
- [Compare Slider](https://dinachi.dev/docs/components/compare-slider): Drag a divider to compare two layers.
- [Context Menu](https://dinachi.dev/docs/components/context-menu): A menu triggered by right-clicking an element, providing contextual actions and options.
- [Dialog](https://dinachi.dev/docs/components/dialog): A modal window that overlays the main content, requiring user interaction before returning to the parent view.
- [Drawer](https://dinachi.dev/docs/components/drawer): A panel that slides in from the edge of the screen for focused workflows.
- [Expandable Card](https://dinachi.dev/docs/components/expandable-card): A card that opens into its own detail view, and travels there rather than being replaced.
- [Field](https://dinachi.dev/docs/components/field): A form field component that provides structure for labels, controls, descriptions, and error messages. Handles validation and accessibility automatically.
- [Fieldset](https://dinachi.dev/docs/components/fieldset): A grouping container for related form controls with an accessible legend.
- [Form](https://dinachi.dev/docs/components/form): A native form wrapper with consolidated error handling built on Base UI foundations.
- [Hold to Confirm](https://dinachi.dev/docs/components/hold-to-confirm): A destructive action gated behind a deliberate hold.
- [Input](https://dinachi.dev/docs/components/input): A flexible input field component supporting various types and states. Designed for seamless form integration.
- [Label](https://dinachi.dev/docs/components/label): A styled label component for form fields.
- [Link](https://dinachi.dev/docs/components/link): A semantic anchor element with style variants and support for external links and framework router composition.
- [Load Transition](https://dinachi.dev/docs/components/load-transition): The handover from skeleton to content, without the height jump.
- [Marquee](https://dinachi.dev/docs/components/marquee): A strip that scrolls its content on a seamless loop.
- [Menu](https://dinachi.dev/docs/components/menu): A popup menu for actions and options triggered by a button.
- [Menubar](https://dinachi.dev/docs/components/menubar): A horizontal menu bar with dropdown menus, commonly used for application-level navigation and actions.
- [Meter](https://dinachi.dev/docs/components/meter): A visual representation of a scalar measurement within a known range.
- [Navigation Menu](https://dinachi.dev/docs/components/navigation-menu): A collection of navigation links with support for dropdown content panels, ideal for site-wide navigation.
- [Number Field](https://dinachi.dev/docs/components/number-field): A numeric input with increment, decrement, and optional scrubbing controls.
- [Number Ticker](https://dinachi.dev/docs/components/number-ticker): A number that animates to its value.
- [OTP Field](https://dinachi.dev/docs/components/otp-field): A one-time password / verification code input with auto-focus, paste handling, and validation.
- [Popover](https://dinachi.dev/docs/components/popover): A floating panel anchored to a trigger element, used to display rich content like forms, menus, or additional information.
- [Preview Card](https://dinachi.dev/docs/components/preview-card): A floating card that appears on hover to show a preview of linked content, such as URLs or user profiles.
- [Progress](https://dinachi.dev/docs/components/progress): A progress bar that communicates task completion to users and assistive technology.
- [Progress Ring](https://dinachi.dev/docs/components/progress-ring): A radial progress arc, spring-driven, with an indeterminate sweep.
- [Radio](https://dinachi.dev/docs/components/radio): A radio input and group for selecting a single option from a set.
- [Scroll Area](https://dinachi.dev/docs/components/scroll-area): A custom scroll container with styled scrollbars and optional corner rendering.
- [Scroll Progress](https://dinachi.dev/docs/components/scroll-progress): A bar tracking how far a scroll container has been read.
- [Scroll Reveal](https://dinachi.dev/docs/components/scroll-reveal): A block that wipes into view the first time it is scrolled to.
- [Select](https://dinachi.dev/docs/components/select): A form control for choosing one option from a list of predefined values.
- [Separator](https://dinachi.dev/docs/components/separator): A visual divider used to separate and organize content.
- [Skeleton](https://dinachi.dev/docs/components/skeleton): A placeholder loading animation to indicate content is being loaded.
- [Slider](https://dinachi.dev/docs/components/slider): A slider component for selecting values within a range. Supports single value, range selection, and step increments.
- [Sortable](https://dinachi.dev/docs/components/sortable): A list reordered by drag or by keyboard, both ending in the same place.
- [Stagger List](https://dinachi.dev/docs/components/stagger-list): A list whose items arrive one after another.
- [Streaming Text](https://dinachi.dev/docs/components/streaming-text): Text revealed a word at a time as it streams in, without rewinding.
- [Swipeable Row](https://dinachi.dev/docs/components/swipeable-row): A row whose actions are revealed by a velocity-projected swipe.
- [Switch](https://dinachi.dev/docs/components/switch): A binary control that lets users turn an option on or off.
- [Tabs](https://dinachi.dev/docs/components/tabs): A set of layered sections of content, known as tab panels, displayed one at a time.
- [Text](https://dinachi.dev/docs/components/text): A typography component for headings, paragraphs, and text styles with semantic HTML output.
- [Text Morph](https://dinachi.dev/docs/components/text-morph): Text that morphs character by character when it changes.
- [Text Shimmer](https://dinachi.dev/docs/components/text-shimmer): A shimmer for pending states where a spinner would be too loud.
- [Textarea](https://dinachi.dev/docs/components/textarea): A multi-line text field for longer input, styled to match Input.
- [Toast](https://dinachi.dev/docs/components/toast): A succinct message displayed temporarily to provide feedback about an action. Supports multiple variants, promise tracking, custom rendering, and global usage outside React.
- [Toggle](https://dinachi.dev/docs/components/toggle): A toggle button component that can be switched between pressed and unpressed states. Supports multiple variants and sizes.
- [Toggle Group](https://dinachi.dev/docs/components/toggle-group): A set of related toggles that can enforce single or multiple selection.
- [Toolbar](https://dinachi.dev/docs/components/toolbar): A container for grouping a set of controls, such as buttons, toggle groups, or dropdown menus.
- [Tooltip](https://dinachi.dev/docs/components/tooltip): A floating label that appears on hover or focus to provide supplementary information about an element.

## Links

- [GitHub](https://github.com/raymond-UI/dinachiUI)
- [npm](https://www.npmjs.com/package/@dinachi/cli)