# DarkCode UI React Documentation

> Documentation for DarkCode UI React component library.

DarkCode UI React is a component library built on [Tailwind CSS v4](https://tailwindcss.com/) and [React Aria Components](https://react-spectrum.adobe.com/react-aria/). Every component comes with smooth animations, polished details, and built-in accessibility—ready to use, fully customizable.

**Key Features:**

- Beautiful by default - Professional look out of the box
- Accessible - Built with accessibility best practices
- Flexible - Customizable components with predictable patterns
- Developer-friendly - Fully typed APIs and excellent autocompletion

## Documentation Index

### Components

- [All Components](https://ui.darkcode.dev/en/docs/react/components): Explore the full list of components available in the library. More are on the way.
- [ButtonGroup](https://ui.darkcode.dev/en/docs/react/components/button-group): Group related buttons together with consistent styling and spacing
- [Button](https://ui.darkcode.dev/en/docs/react/components/button): A clickable button component with multiple variants and states
- [CloseButton](https://ui.darkcode.dev/en/docs/react/components/close-button): Button component for closing dialogs, modals, or dismissing content
- [ToggleButtonGroup](https://ui.darkcode.dev/en/docs/react/components/toggle-button-group): Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options.
- [ToggleButton](https://ui.darkcode.dev/en/docs/react/components/toggle-button): An interactive toggle control for on/off or selected/unselected states
- [Context Menu](https://ui.darkcode.dev/en/docs/react/components/context-menu): A right-click context menu with nested submenus, selection state, and long-press support for touch
- [Dropdown](https://ui.darkcode.dev/en/docs/react/components/dropdown): A dropdown displays a list of actions or options that a user can choose
- [ListBox](https://ui.darkcode.dev/en/docs/react/components/list-box): A listbox displays a list of options and allows a user to select one or more of them
- [List View](https://ui.darkcode.dev/en/docs/react/components/list-view): A single-column interactive list with keyboard navigation, selection, and accessible item actions — built on React Aria's GridList.
- [TagGroup](https://ui.darkcode.dev/en/docs/react/components/tag-group): A focusable list of tags with support for keyboard navigation, selection, and removal
- [Cell Color Picker](https://ui.darkcode.dev/en/docs/react/components/cell-color-picker): A compact color picker styled as a settings cell, with a leading label and a trailing swatch and live hex value.
- [ColorArea](https://ui.darkcode.dev/en/docs/react/components/color-area): A 2D color picker that allows users to select colors from a gradient area
- [ColorField](https://ui.darkcode.dev/en/docs/react/components/color-field): Color input field with labels, descriptions, and validation built on React Aria ColorField
- [ColorPicker](https://ui.darkcode.dev/en/docs/react/components/color-picker): A composable color picker that synchronizes color value between multiple color components
- [ColorSlider](https://ui.darkcode.dev/en/docs/react/components/color-slider): A color slider allows users to adjust an individual channel of a color value
- [ColorSwatchPicker](https://ui.darkcode.dev/en/docs/react/components/color-swatch-picker): A list of color swatches that allows users to select a color from a predefined palette.
- [ColorSwatch](https://ui.darkcode.dev/en/docs/react/components/color-swatch): A visual preview of a color value with accessibility support
- [ColorWheel](https://ui.darkcode.dev/en/docs/react/components/color-wheel): A circular slider for selecting the hue of a color value
- [Slider](https://ui.darkcode.dev/en/docs/react/components/slider): A slider allows a user to select one or more values within a range
- [Switch](https://ui.darkcode.dev/en/docs/react/components/switch): A toggle switch component for boolean states
- [Badge](https://ui.darkcode.dev/en/docs/react/components/badge): Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels
- [Chip](https://ui.darkcode.dev/en/docs/react/components/chip): Small informational badges for displaying labels, statuses, and categories
- [Data Grid](https://ui.darkcode.dev/en/docs/react/components/data-grid): A full-featured data grid with sorting, selection, column resizing, pinned columns, drag-and-drop row reorder, expandable rows, virtualization, and async loading — built on the Table component.
- [Kanban](https://ui.darkcode.dev/en/docs/react/components/kanban): A drag-and-drop kanban board with columns, cards, and keyboard navigation for organizing tasks and workflows
- [Number Value](https://ui.darkcode.dev/en/docs/react/components/number-value): A formatted number display with locale-aware rendering for currency, percentages, and compact notation.
- [Table](https://ui.darkcode.dev/en/docs/react/components/table): Tables display structured data in rows and columns with support for sorting, selection, column resizing, and infinite scrolling.
- [Timeline](https://ui.darkcode.dev/en/docs/react/components/timeline): A composable, read-only chronology for activity feeds, audit trails, incident logs, and centered milestone roadmaps.
- [Trend Chip](https://ui.darkcode.dev/en/docs/react/components/trend-chip): A compact chip displaying a trend direction with percentage value, icon indicator, and contextual suffix
- [Agenda](https://ui.darkcode.dev/en/docs/react/components/agenda): Composable calendar with day, week, and month views for displaying and managing events with drag interactions
- [Calendar](https://ui.darkcode.dev/en/docs/react/components/calendar): Composable date picker with month grid, navigation, and year picker support built on React Aria Calendar
- [DateField](https://ui.darkcode.dev/en/docs/react/components/date-field): Date input field with labels, descriptions, and validation built on React Aria DateField
- [DatePicker](https://ui.darkcode.dev/en/docs/react/components/date-picker): Composable date picker built on React Aria DatePicker with DateField and Calendar composition
- [DateRangePicker](https://ui.darkcode.dev/en/docs/react/components/date-range-picker): Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition
- [RangeCalendar](https://ui.darkcode.dev/en/docs/react/components/range-calendar): Composable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar
- [TimeField](https://ui.darkcode.dev/en/docs/react/components/time-field): Time input field with labels, descriptions, and validation built on React Aria TimeField
- [Alert](https://ui.darkcode.dev/en/docs/react/components/alert): Display important messages and notifications to users with status indicators
- [Empty State](https://ui.darkcode.dev/en/docs/react/components/empty-state): A placeholder for empty views with icon, title, description, and call-to-action to guide users.
- [Meter](https://ui.darkcode.dev/en/docs/react/components/meter): A meter represents a quantity within a known range, or a fractional value.
- [Pressable Feedback](https://ui.darkcode.dev/en/docs/react/components/pressable-feedback): A press interaction layer adding ripple, highlight, hold-to-confirm, and progress feedback effects to any element
- [ProgressBar](https://ui.darkcode.dev/en/docs/react/components/progress-bar): A progress bar shows either determinate or indeterminate progress of an operation over time.
- [ProgressCircle](https://ui.darkcode.dev/en/docs/react/components/progress-circle): A circular progress indicator that shows determinate or indeterminate progress.
- [Skeleton](https://ui.darkcode.dev/en/docs/react/components/skeleton): Skeleton is a placeholder to show a loading state and the expected shape of a component.
- [Spinner](https://ui.darkcode.dev/en/docs/react/components/spinner): A loading indicator component to show pending states
- [Cell Slider](https://ui.darkcode.dev/en/docs/react/components/cell-slider): A range slider styled as a settings cell with label, value display, and step configuration
- [CheckboxGroup](https://ui.darkcode.dev/en/docs/react/components/checkbox-group): A checkbox group component for managing multiple checkbox selections
- [Checkbox](https://ui.darkcode.dev/en/docs/react/components/checkbox): Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
- [Description](https://ui.darkcode.dev/en/docs/react/components/description): Provides supplementary text for form fields and other components
- [DropZone](https://ui.darkcode.dev/en/docs/react/components/drop-zone): A drag-and-drop file upload area with file type filtering, size limits, and a file list preview.
- [ErrorMessage](https://ui.darkcode.dev/en/docs/react/components/error-message): A low-level error message component for displaying errors
- [FieldError](https://ui.darkcode.dev/en/docs/react/components/field-error): Displays validation error messages for form fields
- [Fieldset](https://ui.darkcode.dev/en/docs/react/components/fieldset): Group related form controls with legends, descriptions, and actions
- [Form](https://ui.darkcode.dev/en/docs/react/components/form): Wrapper component for form validation and submission handling
- [Inline Select](https://ui.darkcode.dev/en/docs/react/components/inline-select): A minimal inline dropdown that blends into surrounding text for contextual selections without a full form field
- [InputGroup](https://ui.darkcode.dev/en/docs/react/components/input-group): Group related input controls with prefix and suffix elements for enhanced form fields
- [InputOTP](https://ui.darkcode.dev/en/docs/react/components/input-otp): A one-time password input component for verification codes and secure authentication
- [Input](https://ui.darkcode.dev/en/docs/react/components/input): Primitive single-line text input component that accepts standard HTML attributes
- [Label](https://ui.darkcode.dev/en/docs/react/components/label): Renders an accessible label associated with form controls
- [NumberField](https://ui.darkcode.dev/en/docs/react/components/number-field): Number input fields with increment/decrement buttons, validation, and internationalized formatting
- [RadioButtonGroup](https://ui.darkcode.dev/en/docs/react/components/radio-button-group): A single-selection button group with card-style radio options, icons, and custom indicators
- [RadioGroup](https://ui.darkcode.dev/en/docs/react/components/radio-group): Radio group for selecting a single option from a list
- [Rich Text Editor](https://ui.darkcode.dev/en/docs/react/components/rich-text-editor): A composable Lexical editor with toolbar controls, selection and empty-line menus, slash commands, link popover, JSON value updates, and character count.
- [SearchField](https://ui.darkcode.dev/en/docs/react/components/search-field): Search input field with clear button and search icon
- [TextArea](https://ui.darkcode.dev/en/docs/react/components/text-area): Primitive multiline text input component that accepts standard HTML attributes
- [TextField](https://ui.darkcode.dev/en/docs/react/components/text-field): Composition-friendly text fields with labels, descriptions, and inline validation
- [Action Bar](https://ui.darkcode.dev/en/docs/react/components/action-bar): A floating contextual toolbar that surfaces bulk actions for the current selection.
- [Card](https://ui.darkcode.dev/en/docs/react/components/card): Flexible container component for grouping related content and actions
- [Resizable](https://ui.darkcode.dev/en/docs/react/components/resizable): Resizable panel groups with composable handle types and variants
- [Separator](https://ui.darkcode.dev/en/docs/react/components/separator): Visually divide content sections
- [Surface](https://ui.darkcode.dev/en/docs/react/components/surface): Container component that provides surface-level styling and context for child components
- [Toolbar](https://ui.darkcode.dev/en/docs/react/components/toolbar): A container for interactive controls with arrow key navigation.
- [Avatar](https://ui.darkcode.dev/en/docs/react/components/avatar): Display user profile images with customizable fallback content
- [Accordion](https://ui.darkcode.dev/en/docs/react/components/accordion): A collapsible content panel for organizing information in a compact space
- [Breadcrumbs](https://ui.darkcode.dev/en/docs/react/components/breadcrumbs): Navigation breadcrumbs showing the current page's location within a hierarchy
- [Command](https://ui.darkcode.dev/en/docs/react/components/command): A command palette with fuzzy search, keyboard navigation, and grouped actions for quick access.
- [DisclosureGroup](https://ui.darkcode.dev/en/docs/react/components/disclosure-group): Container that manages multiple Disclosure items with coordinated expanded states
- [Disclosure](https://ui.darkcode.dev/en/docs/react/components/disclosure): A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.
- [Link](https://ui.darkcode.dev/en/docs/react/components/link): A styled anchor component for navigation with built-in icon support
- [Navbar](https://ui.darkcode.dev/en/docs/react/components/navbar): A composable top navigation bar with hide-on-scroll, responsive mobile menu, and client-side routing support
- [Pagination](https://ui.darkcode.dev/en/docs/react/components/pagination): Page navigation with composable page links, previous/next buttons, and ellipsis indicators
- [Sidebar](https://ui.darkcode.dev/en/docs/react/components/sidebar): A responsive sidebar navigation component with collapsible groups, rail mode, icon collapse, resizing, hover-to-peek, search, drag-to-reorder, and mobile sheet support.
- [Stepper](https://ui.darkcode.dev/en/docs/react/components/stepper): A step-by-step progress indicator with numbered, icon, and bullet variants in horizontal or vertical layouts.
- [Tabs](https://ui.darkcode.dev/en/docs/react/components/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
- [AlertDialog](https://ui.darkcode.dev/en/docs/react/components/alert-dialog): Modal dialog for critical confirmations requiring user attention and explicit action
- [Drawer](https://ui.darkcode.dev/en/docs/react/components/drawer): Slide-out panel for supplementary content and actions
- [Modal](https://ui.darkcode.dev/en/docs/react/components/modal): Dialog overlay for focused user interactions and important content
- [Popover](https://ui.darkcode.dev/en/docs/react/components/popover): Displays rich content in a portal triggered by a button or any custom element
- [Toast](https://ui.darkcode.dev/en/docs/react/components/toast): Display temporary notifications and messages to users with automatic dismissal and customizable placement
- [Tooltip](https://ui.darkcode.dev/en/docs/react/components/tooltip): Displays informative text when users hover over or focus on an element
- [Autocomplete](https://ui.darkcode.dev/en/docs/react/components/autocomplete): An autocomplete combines a select with filtering, allowing users to search and select from a list of options
- [Cell Select](https://ui.darkcode.dev/en/docs/react/components/cell-select): A compact select styled as a settings cell, ideal for preference panels and configuration forms.
- [ComboBox](https://ui.darkcode.dev/en/docs/react/components/combo-box): A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query
- [Select](https://ui.darkcode.dev/en/docs/react/components/select): A select displays a collapsible list of options and allows a user to select one of them
- [Kbd](https://ui.darkcode.dev/en/docs/react/components/kbd): Display keyboard shortcuts and key combinations
- [Typography](https://ui.darkcode.dev/en/docs/react/components/typography): A semantic typography primitive for headings, body copy, and inline code built on React Aria Components Text.
- [ScrollShadow](https://ui.darkcode.dev/en/docs/react/components/scroll-shadow): Apply visual shadows to indicate scrollable content overflow with automatic detection of scroll position.

### Getting-started

- [Introduction](https://ui.darkcode.dev/en/docs/react/getting-started): An open-source UI component library for building beautiful and accessible user interfaces.
- [Animation](https://ui.darkcode.dev/en/docs/react/getting-started/animation): Add smooth animations and transitions to DarkCode UI components
- [Colors](https://ui.darkcode.dev/en/docs/react/getting-started/colors): Color palette and theming system for DarkCode UI
- [Composition](https://ui.darkcode.dev/en/docs/react/getting-started/composition): Build flexible UI with component composition patterns
- [Dark Mode](https://ui.darkcode.dev/en/docs/react/getting-started/dark-mode): Add light, dark, and system theme switching to DarkCode UI
- [Performance](https://ui.darkcode.dev/en/docs/react/getting-started/performance): Ship the smallest possible JavaScript and CSS with DarkCode UI
- [Styling](https://ui.darkcode.dev/en/docs/react/getting-started/styling): Style DarkCode UI components with CSS, Tailwind, or CSS-in-JS
- [Theming](https://ui.darkcode.dev/en/docs/react/getting-started/theming): Customize DarkCode UI's design system with CSS variables and global styles
- [CLI](https://ui.darkcode.dev/en/docs/react/getting-started/cli): Use the CLI to manage DarkCode UI dependencies and initialize projects.
- [Design Principles](https://ui.darkcode.dev/en/docs/react/getting-started/design-principles): Core principles that guide DarkCode UI's design and development
- [Frameworks](https://ui.darkcode.dev/en/docs/react/getting-started/frameworks): Integrate DarkCode UI with your framework
- [Quick Start](https://ui.darkcode.dev/en/docs/react/getting-started/quick-start): Get started with DarkCode UI in minutes
- [Agent Skills](https://ui.darkcode.dev/en/docs/react/getting-started/agent-skills): Enable AI assistants to build UIs with DarkCode UI components
- [AGENTS.md](https://ui.darkcode.dev/en/docs/react/getting-started/agents-md): Download DarkCode UI React documentation for AI coding agents
- [LLMs.txt](https://ui.darkcode.dev/en/docs/react/getting-started/llms-txt): Enable AI assistants like Claude, Cursor, and Windsurf to understand DarkCode UI
- [MCP Server](https://ui.darkcode.dev/en/docs/react/getting-started/mcp-server): Access DarkCode UI documentation directly in your AI assistant

### Releases

- [All Releases](https://ui.darkcode.dev/en/docs/react/releases): All updates and changes to DarkCode UI, including new features, fixes, and breaking changes.
- [Introducing DarkCode UI v1.0.0](https://ui.darkcode.dev/en/docs/react/releases/v1-0-0): The first stable release of DarkCode UI — beautiful, accessible React components built on React Aria and Tailwind CSS v4.