# dotUI

> dotUI is a design system platform and component registry built on React Aria Components, Tailwind CSS 4, and TypeScript 5. Generate a branded UI library in minutes with the style editor, then consume it through the shadcn CLI, the registry endpoint (https://dotui.org/r/{name}), or AI tooling like v0. Append .md to any docs URL for its raw markdown, or read https://dotui.org/llms-full.txt for the entire documentation in a single file.

## Overview

- [Introduction](https://dotui.org/docs): A design system platform and component registry. Built for humans and AI.
- [Installation](https://dotui.org/docs/installation): Learn how to add dotUI to your project.

## Components

- [Components](https://dotui.org/docs/components): Browse every component in the library — accessible, composable, and styled to match your design system.
- [Accordion](https://dotui.org/docs/components/accordion): A grouping of related disclosures that supports both single and multiple expanded items.
- [Alert](https://dotui.org/docs/components/alert): Alerts display a short, important message in a way that attracts the user's attention.
- [Avatar](https://dotui.org/docs/components/avatar): An avatar is a visual representation of a user or entity.
- [Badge](https://dotui.org/docs/components/badge): Badges are small status descriptors for UI elements.
- [Breadcrumbs](https://dotui.org/docs/components/breadcrumbs): Breadcrumbs display a hierarchy of links to the current page or resource in an application.
- [Button](https://dotui.org/docs/components/button): Displays a button or a component that looks like a button.
- [Calendar](https://dotui.org/docs/components/calendar): A calendar allows a user to select a single date value.
- [Card](https://dotui.org/docs/components/card): A card groups related content and actions.
- [Chart](https://dotui.org/docs/components/chart): Beautiful, accessible charts built on Recharts and themed by your design system.
- [Checkbox](https://dotui.org/docs/components/checkbox): Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
- [Checkbox Group](https://dotui.org/docs/components/checkbox-group): A checkbox group allows a user to select multiple items from a list of options.
- [Color Area](https://dotui.org/docs/components/color-area): A color area allows users to select a color from a two-dimensional gradient.
- [Color Editor](https://dotui.org/docs/components/color-editor): A color editor allows users to adjust a color value using a color area, channel sliders, and field inputs in multiple color formats.
- [Color Field](https://dotui.org/docs/components/color-field): A color field allows users to edit a color value using a text field.
- [Color Picker](https://dotui.org/docs/components/color-picker): A color picker allows users to select a color from a palette or input a custom color value.
- [Color Slider](https://dotui.org/docs/components/color-slider): A color slider allows users to adjust an individual channel of a color value.
- [Color Swatch](https://dotui.org/docs/components/color-swatch): A color swatch displays a color sample.
- [Color Swatch Picker](https://dotui.org/docs/components/color-swatch-picker): A color swatch picker allows users to select a color from a list of swatches.
- [Combobox](https://dotui.org/docs/components/combobox): Combobox combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- [Command](https://dotui.org/docs/components/command): A command menu lets users search a list of commands and run one.
- [Context Menu](https://dotui.org/docs/components/context-menu): A context menu displays a list of actions at the pointer position.
- [Date Field](https://dotui.org/docs/components/date-field): A date field allows users to enter and edit date values using a keyboard.
- [Date Picker](https://dotui.org/docs/components/date-picker): A date picker combines a date field and a calendar popover to allow users to select a date.
- [Dialog](https://dotui.org/docs/components/dialog): A dialog is an overlay shown above other content in an application.
- [Disclosure](https://dotui.org/docs/components/disclosure): A collapsible section of content with a heading trigger that can be expanded or collapsed.
- [Drawer](https://dotui.org/docs/components/drawer): A drawer slides in from the edge of the screen to display content.
- [Drop Zone](https://dotui.org/docs/components/drop-zone): A drop zone is an area into which one or more objects can be dragged and dropped.
- [Empty](https://dotui.org/docs/components/empty): An empty state placeholder for when there's no content to display.
- [Field](https://dotui.org/docs/components/field): A field wraps form inputs with labels, descriptions, and error messages.
- [File Trigger](https://dotui.org/docs/components/file-trigger): A file trigger allows a user to access the file system with any pressable element.
- [Form](https://dotui.org/docs/components/form): A form wraps a group of form elements and handles form submission.
- [Group](https://dotui.org/docs/components/group): A group visually groups related UI elements together.
- [Input](https://dotui.org/docs/components/input): A basic input component for text entry.
- [Input Group](https://dotui.org/docs/components/input-group): An input group combines an input with addons like buttons, icons, or labels.
- [Kbd](https://dotui.org/docs/components/kbd): A keyboard key indicator displays keyboard shortcuts.
- [Link](https://dotui.org/docs/components/link): A link allows a user to navigate to another page or resource.
- [List Box](https://dotui.org/docs/components/list-box): A listbox displays a list of options and allows a user to select one or more of them.
- [Loader](https://dotui.org/docs/components/loader): A loader indicates that content is being loaded.
- [Mention](https://dotui.org/docs/components/mention): Mention lets users type a trigger character to insert people, channels, or other tokens inline as they write.
- [Menu](https://dotui.org/docs/components/menu): A menu displays a list of actions or options that a user can choose.
- [Modal](https://dotui.org/docs/components/modal): A modal displays content in a layer that overlays the page content.
- [Number Field](https://dotui.org/docs/components/number-field): A number field allows a user to enter a number value with a keyboard or increment/decrement with step buttons.
- [OTP Field](https://dotui.org/docs/components/otp-field): An OTP field lets users enter a one-time passcode across multiple single-character inputs.
- [Pagination](https://dotui.org/docs/components/pagination): Pagination lets users navigate through content split across multiple pages.
- [Popover](https://dotui.org/docs/components/popover): A popover displays content in a floating container that appears above other content.
- [Progress Bar](https://dotui.org/docs/components/progress-bar): A progress bar shows the progression of a task.
- [Radio Group](https://dotui.org/docs/components/radio-group): A radio group allows a user to select a single item from a list of mutually exclusive options.
- [Search Field](https://dotui.org/docs/components/search-field): A search field allows a user to enter and clear a search query.
- [Segmented Control](https://dotui.org/docs/components/segmented-control): A segmented control lets users pick one option from a small set, with a pill indicator that slides to the selection.
- [Select](https://dotui.org/docs/components/select): Select displays a collapsible list of options and allows a user to select one of them.
- [Separator](https://dotui.org/docs/components/separator): A separator visually divides content in lists, menus, or other places.
- [Sidebar](https://dotui.org/docs/components/sidebar): A composable, collapsible sidebar for application shells — with a mobile drawer, icon mode, and keyboard toggle.
- [Skeleton](https://dotui.org/docs/components/skeleton): Skeleton is a placeholder component that displays while content is loading.
- [Slider](https://dotui.org/docs/components/slider): An input where the user selects a value from within a given range.
- [Switch](https://dotui.org/docs/components/switch): Switches allow users to turn an individual option on or off.
- [Table](https://dotui.org/docs/components/table): A table displays data in rows and columns and enables a user to navigate and select its contents.
- [Tabs](https://dotui.org/docs/components/tabs): Tabs organize content into multiple sections and allow users to navigate between them.
- [Tag Group](https://dotui.org/docs/components/tag-group): A tag group displays a collection of tags.
- [Text Area](https://dotui.org/docs/components/text-area): A text area allows users to enter multi-line text.
- [TextField](https://dotui.org/docs/components/text-field): TextField allows a user to enter a plain text value with a keyboard.
- [Time Field](https://dotui.org/docs/components/time-field): A time field allows users to enter and edit time values using a keyboard.
- [Time Picker](https://dotui.org/docs/components/time-picker): A time picker combines a time field and a scrollable column popover to allow users to select a time.
- [Toast](https://dotui.org/docs/components/toast): A toast displays a brief, temporary notification.
- [Toggle Button](https://dotui.org/docs/components/toggle-button): A toggle button allows a user to toggle a selection on or off.
- [Toggle Button Group](https://dotui.org/docs/components/toggle-button-group): A toggle button group allows users to select one or more options from a set.
- [Tooltip](https://dotui.org/docs/components/tooltip): A tooltip displays a description of an element on hover or focus.
- [Tree](https://dotui.org/docs/components/tree): A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection.