# 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, registry endpoints, or AI tooling like v0. ## Overview - [Introduction](https://dotui.org/docs): Why dotUI exists, how React Aria primitives + Tailwind Variants deliver accessibility and flexibility, and how the style editor keeps the design workflow fast. - [Installation](https://dotui.org/docs/installation): Requirements, CLI flow, registry config, and tips for adding single components versus the entire library. ## Components ### Form & text inputs - [Form](https://dotui.org/docs/components/form) – wraps React Aria form state with labels, descriptions, and submit handling. - [Text Field](https://dotui.org/docs/components/text-field) – base text input wrapper with Label, Description, FieldError slots. - [Text Area](https://dotui.org/docs/components/text-area) – multiline field with auto-resize and shared variants. - [Number Field](https://dotui.org/docs/components/number-field) – segmented numeric input with increment/decrement steppers and localization. - [Search Field](https://dotui.org/docs/components/search-field) – optimized for search semantics, includes clear buttons and keyboard hints. - [File Trigger](https://dotui.org/docs/components/file-trigger) – accessible uploader that pairs with any trigger and exposes selected files. - [Drop Zone](https://dotui.org/docs/components/drop-zone) – drag-and-drop surface with visual drop states and keyboard focus. ### Selection & collections - [Button](https://dotui.org/docs/components/button) – multi-variant button with pending states, icon slots, quiet/link/danger variants, and provider support. - [Checkbox](https://dotui.org/docs/components/checkbox) – controlled/uncontrolled checkbox with indicator slots and focus styles. - [Checkbox Group](https://dotui.org/docs/components/checkbox-group) – shared labels/descriptions for related checkboxes. - [Radio Group](https://dotui.org/docs/components/radio-group) – stacked or inline radios with field grouping and validation. - [Toggle Button](https://dotui.org/docs/components/toggle-button) – on/off button with `isSelected` state handling. - [Switch](https://dotui.org/docs/components/switch) – thumb-based toggle that respects reduced motion and form semantics. - [Slider](https://dotui.org/docs/components/slider) – single-value slider with marks, tooltips, and orientation support. - [Select](https://dotui.org/docs/components/select) – composed from Button + Popover + ListBox, supports async data and custom triggers. - [Combobox](https://dotui.org/docs/components/combobox) – typeahead input with filtered list items, free-form entry, and Badge outputs. - [List Box](https://dotui.org/docs/components/list-box) – reusable collection primitive for menus, selects, navigation, and multi-select. - [Menu](https://dotui.org/docs/components/menu) – contextual menu with sections, icons, destructive variants, and keyboard navigation. - [Command](https://dotui.org/docs/components/command) – command palette (cmdk) with grouped items, search input, and shortcuts. ### Date & time - [Calendar](https://dotui.org/docs/components/calendar) – month grid with custom headers, disabled dates, and keyboard nav. - [Range Calendar](https://dotui.org/docs/components/range-calendar) – start/end selection with hover previews and range states. - [Date Field](https://dotui.org/docs/components/date-field) – segmented date entry with localized parsing. - [Date Picker](https://dotui.org/docs/components/date-picker) – input + popover calendar for single-date selection. - [Date Range Picker](https://dotui.org/docs/components/date-range-picker) – dual inputs with shared range calendar popover. - [Time Field](https://dotui.org/docs/components/time-field) – segmented time input (hours/minutes/seconds) with spin controls. ### Color tools - [Color Field](https://dotui.org/docs/components/color-field) – text field for HEX/RGB/HSL values with validation feedback. - [Color Picker](https://dotui.org/docs/components/color-picker) – trigger + popover that composes the rest of the color primitives. - [Color Area](https://dotui.org/docs/components/color-area) – 2D gradient surface (saturation/value) with keyboard focus. - [Color Slider](https://dotui.org/docs/components/color-slider) – 1D slider for hue/saturation/brightness/alpha. - [Color Swatch](https://dotui.org/docs/components/color-swatch) – preview chip with alpha checkerboard and optional label. - [Color Swatch Picker](https://dotui.org/docs/components/color-swatch-picker) – collection of swatches with selection/removal affordances. ### Overlays, feedback & status - [Alert](https://dotui.org/docs/components/alert) – contextual banners with title, description, and tone variants (info, success, warning, danger). - [Dialog](https://dotui.org/docs/components/dialog) – overlay content structure (Header, Body, Footer, slots) with focus trapping. - [Modal](https://dotui.org/docs/components/modal) – dialog presentation optimized for centered modals. - [Drawer](https://dotui.org/docs/components/drawer) – top/side/bottom sheets built from Dialog + Overlay primitives. - [Overlay](https://dotui.org/docs/components/overlay) – responsive wrapper that swaps between modal, drawer, or popover depending on viewport. - [Popover](https://dotui.org/docs/components/popover) – anchored floating panels for menus, filters, and contextual help. - [Tooltip](https://dotui.org/docs/components/tooltip) – lightweight hover/focus hints with optional `Kbd` combinations. - [Progress Bar](https://dotui.org/docs/components/progress-bar) – determinate/indeterminate progress with animated fills. - [Skeleton](https://dotui.org/docs/components/skeleton) – skeleton provider + blocks with shimmer animation for loading states. ### Layout, navigation & display - [Tabs](https://dotui.org/docs/components/tabs) – horizontal/vertical tabs with animated indicators and lazy rendering. - [Table](https://dotui.org/docs/components/table) – accessible table primitives (Header, Body, Row, Cell) with sticky header and zebra variants. - [Breadcrumbs](https://dotui.org/docs/components/breadcrumbs) – navigation trail with separators and ellipsis collapsing. - [Separator](https://dotui.org/docs/components/separator) – horizontal/vertical dividers for layout and menus. - [Avatar](https://dotui.org/docs/components/avatar) – image + fallback initials with group stacking. - [Badge](https://dotui.org/docs/components/badge) – pill labels for statuses, filters, or metadata chips.