Create UI is a modern, accessible component library for React 19 and Tailwind CSS v4. Every component is built on Radix UI primitives for keyboard and screen-reader support, styled with class-variance-authority (CVA) variants and semantic design tokens, and ships with full TypeScript types, dark mode, and copy-paste installation through the Create UI CLI.
If you are searching for production-ready React UI components, Tailwind CSS components, an accessible design system, or a shadcn-style component registry you can own and extend, this page is the index to every documented component.
Documentation · Component Index · Installation · Issues · Discussions
Add any component to your project with the CLI. Each command pulls the component source, its dependencies, and the required tokens into your codebase so you fully own the code:
npx @create-ui/cli initSee the installation guide for project setup, framework support, and theming.
Every component has a dedicated documentation page that follows the same layout, so you always know where to look:
- Live preview: an interactive demo you can inspect at the top of the page.
- Description: when to reach for the component and how it relates to its siblings.
- Installation: the exact CLI command to add it.
- Usage: import paths and copy-paste code snippets.
- API reference: props, variants, and slots.
Browse everything from the full components index, or jump straight to a component from the categorized tables below. Components are grouped by the job they do (actions, forms, navigation, and so on) to match how you build a screen.
Interactive controls that trigger actions, submit forms, and surface primary calls to action.
| Component | Description |
|---|---|
| Button | Interactive control for primary actions, form submission, and inline triggers. |
| Button Group | Joined row of buttons that share a single bordered surface for segmented toolbars and view switchers. |
| Close Button | Compact icon button for dismissing dialogs, toasts, banners, and other overlays. |
| Social Login Button | Branded sign-in button for OAuth flows across the major social providers. |
| App Store Badge | Branded download CTA for app stores, browser extension marketplaces, and music services. |
| Fab Button | Floating action button for a primary screen action, compose shortcut, or mobile speed dial. |
Everything you need to capture and validate user input, from single fields to grouped, labelled form controls.
| Component | Description |
|---|---|
| Field | Layout wrapper that pairs a form control with its label, description, and error. |
| Label | Caption for a form control, with slots for icons, markers, badges, tooltips, and counters. |
| Input | Single-line text field for capturing short user input such as names, emails, numbers, and queries. |
| Textarea | Multi-line text input for longer prose, with built-in size, state, and resize controls. |
| Input Group | Compound input shell that composes Input with icons, addons, buttons, and selects inside a single bordered row. |
| Phone Input | Country-picker phone field that formats national digits and emits a submit-ready E.164 value. |
| Date Input | Masked date field with a configurable DD/MM/YYYY, MDY, or YMD segment order. |
| Credit Card Input | Masked card-number field with brand detection, a trailing badge, and a validity marker. |
| Input OTP | One-time-code input that splits each character into its own slot. |
| Input Stepper | Numeric input with attached increment and decrement buttons for tight quantity controls. |
| Select | Dropdown for choosing one value from a short list, with built-in keyboard, focus, and form-field composition. |
| Combobox | Type-to-filter picker for long option lists, with optional off-list custom values. |
| Checkbox | Boolean toggle for binary choices in forms, lists, and bulk-selection rows. |
| Checkbox Group | Labelled checkbox row that pairs a single Checkbox with a label, description, and error footer. |
| Radio | Single-choice form control for mutually-exclusive options inside a RadioGroup. |
| Radio Group | Single-select form group with shared label, helper text, and error footer. |
| Switch | Toggle control for on/off settings that commit immediately. |
| Switch Group | Labelled switch row that pairs a single Switch with a label, description, and footer. |
| Segmented Control | Single-select switcher for 2 to 5 inline options, with a flat row or grouped pill style. |
| Slider | Draggable track for picking a numeric value within a known range. |
| Chip | Compact interactive label for selection, filtering, and tagging. |
| Dropzone | Drag-and-drop (or click) file drop area with built-in accept and size validation. |
| File Upload | Drag-and-drop upload area with a per-file list showing format, progress, and status. |
| Input Tag | Type-to-add tag input that turns entries into removable chips inside the field. |
| Password Strength | Segmented meter and rule checklist for password requirements below an Input. |
| Rating | Star, heart, emoji, or number rating control for reviews and satisfaction surveys. |
Wayfinding components that move users between pages, sections, and commands.
| Component | Description |
|---|---|
| Breadcrumbs | Hierarchical nav trail that shows the path from the app root to the current page. |
| Pagination | Numbered navigation for splitting long lists across pages. |
| Tab Menu | Compound menu for switching between sections, with vertical or horizontal layouts and an animated active indicator. |
| Tabs | ARIA tabs that swap a content panel within the same surface, for settings and detail views. |
| Dropdown Menu | Action menu that opens from a button, for account controls, row actions, and overflow commands. |
| Context Menu | Right-click menu attached to a region, for row, canvas, and editor actions. |
| Stepper | Linear, discrete progress indicator for onboarding, checkout, and multi-step forms. |
| Text Link | Inline anchor for in-body links that stay inside the flow of text. |
| Command | Searchable command palette for quick actions and fuzzy-matched navigation. |
| Navbar | Top navigation bar with brand slot, nav links, actions cluster, and responsive mobile menu. |
| Sidebar | Collapsible application sidebar with grouped nav items and an icon-rail mode. |
Components for presenting identity, status, counts, and grouped content.
| Component | Description |
|---|---|
| Avatar | Image, initials, or icon thumbnail with optional status badge, ring, and grouping. |
| Badge | Compact label for statuses, counts, and metadata. |
| Status Badge | Colored dot that signals presence or live state next to a label, avatar, or row. |
| Accordion | Stacked disclosure rows that expand a single panel at a time or many in parallel. |
| File Format | File type icon for upload queues, attachment chips, and download cards. |
Components that communicate progress, system messages, and transient notifications.
| Component | Description |
|---|---|
| Inline Alert | In-flow status surface for system messages and contextual notices anchored to a section. |
| Toast | Transient, screen-level notification that confirms an action or surfaces a short-lived message. |
| Tooltip | Short hover hint that names a control or explains a brief detail. |
| Progress | Bar or ring that shows how far a known task has advanced. |
| Spinner | Indeterminate loading indicator for async work in buttons, forms, and inline content. |
| Alert Banner | Dismissible, page-level announcement bar for status, consent, and outage notices. |
| Info Tooltip | Icon-triggered tooltip for supplemental help text next to a label or field. |
Floating surfaces anchored to a trigger, for modal tasks, contextual panels, and popovers.
| Component | Description |
|---|---|
| Modal | Accessible modal dialog with overlay, focus trap, and composable header, body, and footer slots. |
| Popover | Anchored floating panel for contextual content positioned next to a trigger. |
Structural helpers that hold space, manage scroll, and divide content.
| Component | Description |
|---|---|
| Aspect Ratio | Reserves a fixed width-to-height ratio for media and embeds so the layout stays put while they load. |
| Scroll Area | Styled scroll container with overlay scrollbars for vertical, horizontal, or both axes. |
| Separator | Thin horizontal rule for breaking content into visual sections, with optional inline label. |
The design foundation underneath every component: one semantic token system you own and theme. These tokens drive color, type, spacing, radius, and elevation across the whole library, so components stay consistent and adapt to light and dark mode automatically.
| Topic | Description |
|---|---|
| Colors | Semantic color tokens for theming, dark mode, and consistent UI. |
| Typography | One type system, seven token families, applied with a single utility class. |
| Spacing | Responsive, semantic spacing tokens for layout, section, and component rhythm. |
| Rounded | Responsive, semantic border-radius tokens that scale corners across breakpoints. |
| Shadows | Semantic shadow tokens for elevation, component states, and depth. |
Create UI is a closed-source library, and this repository exists for community engagement: bug reports, feature requests, and discussion. The component source itself is distributed through the CLI and the documentation site.
Before opening an issue:
- Search existing issues to avoid duplicates.
- Open a new issue and pick the right type:
bug: something is broken or behaves unexpectedly.feature: a new component, variant, or capability you would like to see.question: usage help or a request for clarification.
- Include the component name, your Create UI / React / Tailwind versions, and a minimal reproduction where relevant.
For broader conversations, ideas, and showcase, use GitHub Discussions.