# DinachiUI > Production-ready React component library built on Base UI with Tailwind CSS. Copy-paste components with full ownership via CLI. DinachiUI provides 35+ 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. ## 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. - [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. - [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. - [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. - [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. - [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. - [Input](https://dinachi.dev/docs/components/input): A flexible input field component supporting various types and states. Designed for seamless form integration. - [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. - [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. - [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. - [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. - [Slider](https://dinachi.dev/docs/components/slider): A slider component for selecting values within a range. Supports single value, range selection, and step increments. - [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. - [Toast](https://dinachi.dev/docs/components/toast): A succinct message displayed temporarily to provide feedback about an action. Supports multiple variants and auto-dismiss. - [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)