# Create UI > Create UI is a AI Native Figma design system and React component library that helps designers and developers design, build, and ship interfaces faster. Open-code components and one semantic token system you own and theme, built on React, Radix UI, CVA, and Tailwind CSS v4. It combines a structured Figma design system, an installable React component library, and a deep token and style system to eliminate the gap between design and development. Key facts: - 65+ production-ready components, shipped in both Figma and React - 16,800+ variant combinations covering sizes, states, styles, and interactions - 700+ design tokens and variables - 140+ prebuilt styles (77 text, 55 shadow, 14 blur) - Open code: every component lives in your repo, editable as a file - One semantic token system, retheme once and every component follows, dark mode included - Free core React code library; Pro tier adds the full Figma design system and Pro code library - AI-ready: consistent API and registry that models read, extend, and generate against, plus MCP and an agent skill - Built for product designers, frontend developers, indie hackers, and startups ## Getting Started - [Introduction](https://createui.co/docs): What Create UI is — open code, one system with many themes, composition, beautiful defaults, distribution, and AI-ready design. - [Installation](https://createui.co/docs/installation): Start a new project with Create UI, or add it to one you already have. - [Components](https://createui.co/docs/components): The full set of available components, each with live examples. - [Agent Skill](https://createui.co/docs/skill): Install the Create UI skill so your AI coding agent writes correct Create UI code. - [MCP Server](https://createui.co/docs/mcp): Use the Create UI MCP server to browse, search, and install components from registries with AI agents. - [CLI](https://createui.co/docs/cli): Use the createui CLI to add components to your project. - [Changelog](https://createui.co/docs/changelog): Latest updates and announcements. ## Foundation - [Typography](https://createui.co/docs/typography): One type system, seven token families, applied with a single utility class. - [Spacing](https://createui.co/docs/spacing): Responsive, semantic spacing tokens for layout, section, and component rhythm. - [Rounded](https://createui.co/docs/rounded): Responsive, semantic border-radius tokens that scale corners across breakpoints. - [Colors](https://createui.co/docs/colors): Semantic color tokens for theming, dark mode, and consistent UI. - [Shadows](https://createui.co/docs/shadows): Semantic shadow tokens for elevation, component states, and depth. ## Components - [Accordion](https://createui.co/docs/components/accordion): Stacked disclosure rows that expand a single panel at a time or many in parallel. - [Alert Banner](https://createui.co/docs/components/alert-banner): Full-width, dismissible banner for page or workspace-level announcements and status messages. - [App Store Badge](https://createui.co/docs/components/app-store-badge): Branded download CTA for app stores, browser extension marketplaces, and music services. - [Aspect Ratio](https://createui.co/docs/components/aspect-ratio): Reserves a fixed width-to-height ratio for media and embeds so the layout stays put while they load. - [Avatar](https://createui.co/docs/components/avatar): Image, initials, or icon thumbnail with optional status badge, ring, and grouping. - [Badge](https://createui.co/docs/components/badge): Compact label for statuses, counts, and metadata. - [Breadcrumbs](https://createui.co/docs/components/breadcrumbs): Hierarchical nav trail that shows the path from the app root to the current page. - [Button](https://createui.co/docs/components/button): Interactive control for primary actions, form submission, and inline triggers. - [Button Group](https://createui.co/docs/components/button-group): Joined row of buttons that share a single bordered surface for segmented toolbars and view switchers. - [Checkbox](https://createui.co/docs/components/checkbox): Boolean toggle for binary choices in forms, lists, and bulk-selection rows. - [Checkbox Group](https://createui.co/docs/components/checkbox-group): Labelled checkbox row that pairs a single Checkbox with a label, description, and error footer. - [Chip](https://createui.co/docs/components/chip): Compact interactive label for selection, filtering, and tagging. - [Close Button](https://createui.co/docs/components/close-button): Compact icon button for dismissing dialogs, toasts, banners, and other overlays. - [Combobox](https://createui.co/docs/components/combobox): Text input that filters a list as you type and commits one value, with optional off-list custom values. - [Command](https://createui.co/docs/components/command): Searchable command palette in a modal shell, for actions, navigation, and search. - [Context Menu](https://createui.co/docs/components/context-menu): Right-click menu that opens at the cursor over a region, for row actions, canvas commands, and editor shortcuts. - [Dropdown Menu](https://createui.co/docs/components/dropdown-menu): Action menu that opens from a button, for account controls, row actions, and overflow commands. - [Dropzone](https://createui.co/docs/components/dropzone): Drag-and-drop file drop area with a built-in trigger, accept and size validation, and an onFilesAccepted callback. - [FAB Button](https://createui.co/docs/components/fab-button): Floating action button for a screen's primary action, with an optional expandable group of secondary actions that stack vertically or fan out radially. - [Field](https://createui.co/docs/components/field): Layout wrapper that pairs a form control with its label, description, and error. - [File Format](https://createui.co/docs/components/file-format): Scalable SVG icon for a file type, with an auto-mapped glyph, brand color, and format label. - [File Upload](https://createui.co/docs/components/file-upload): Drag-and-drop upload area with a per-file list that shows file format, progress, and upload status. - [Info Tooltip](https://createui.co/docs/components/info-tooltip): Info-icon trigger that reveals a short hint on hover, sized to sit beside a field label. - [Inline Alert](https://createui.co/docs/components/inline-alert): In-flow status surface for system messages and contextual notices anchored to a section. - [Input Stepper](https://createui.co/docs/components/input-stepper): Numeric input with attached increment and decrement buttons for tight quantity controls. - [Input](https://createui.co/docs/components/input): Single-line text field for capturing short user input such as names, emails, numbers, and queries. - [Input Group](https://createui.co/docs/components/input-group): Compound input shell that composes Input with icons, addons, buttons, and selects inside a single bordered row. - [Input OTP](https://createui.co/docs/components/input-otp): One-time-code input that splits each character into its own slot. - [Input Tag](https://createui.co/docs/components/input-tag): Text field that turns typed entries into removable chips, inline within the field or in a group below it. - [Label](https://createui.co/docs/components/label): Caption for a form control, with slots for icons, markers, badges, tooltips, and counters. - [Modal](https://createui.co/docs/components/modal): Accessible modal dialog built on Radix Dialog, with an overlay, focus trap, and composable header, icon, body, and footer slots. - [Navbar](https://createui.co/docs/components/navbar): Top navigation bar with a logo-agnostic brand, Button-backed links, a right-aligned actions cluster, and a responsive mobile menu. - [Pagination](https://createui.co/docs/components/pagination): Numbered navigation for splitting long lists across pages. - [Password Strength](https://createui.co/docs/components/password-strength): Strength meter with an optional rules checklist that reflects how secure a password is as the user types. - [Popover](https://createui.co/docs/components/popover): Anchored floating panel for contextual content next to a trigger, without blocking the page. - [Progress](https://createui.co/docs/components/progress): Bar or ring that shows how far a known task has advanced. - [Radio](https://createui.co/docs/components/radio): Single-choice form control for mutually-exclusive options inside a RadioGroup. - [Radio Group](https://createui.co/docs/components/radio-group): Single-select form group with shared label, helper text, and error footer. - [Rating](https://createui.co/docs/components/rating): Star, heart, emoji, or number rating, used as an interactive control or a read-only score. - [Scroll Area](https://createui.co/docs/components/scroll-area): Styled scroll container with overlay scrollbars for vertical, horizontal, or both axes. - [Segmented Control](https://createui.co/docs/components/segmented-control): Single-select switcher for 2 to 5 inline options, with a flat row or grouped pill style. - [Select](https://createui.co/docs/components/select): Dropdown for choosing one value from a short list, with built-in keyboard, focus, and form-field composition. - [Separator](https://createui.co/docs/components/separator): Thin horizontal rule for breaking content into visual sections, with optional inline label. - [Sidebar](https://createui.co/docs/components/sidebar): Collapsible application sidebar with a logo-agnostic brand, grouped navigation with a native active state, per-item tooltips while collapsed, and a footer slot. - [Slider](https://createui.co/docs/components/slider): Pick a value within a range by dragging a thumb along a track. - [Social Login Button](https://createui.co/docs/components/social-login-button): Branded sign-in button for OAuth flows across the major social providers. - [Spinner](https://createui.co/docs/components/spinner): Indeterminate loading indicator for async work in buttons, forms, and inline content. - [Status Badge](https://createui.co/docs/components/status-badge): Colored dot that signals presence or live state next to a label, avatar, or row. - [Stepper](https://createui.co/docs/components/stepper): Compound component that tracks progress through an ordered sequence of steps, with a status per step. - [Switch](https://createui.co/docs/components/switch): Toggle control for on/off settings that commit immediately. - [Switch Group](https://createui.co/docs/components/switch-group): Labelled switch row that pairs a single Switch with a label, description, and footer. - [Tab Menu](https://createui.co/docs/components/tab-menu): Compound menu for switching between sections, with vertical or horizontal layouts and an animated active indicator. - [Tabs](https://createui.co/docs/components/tabs): A set of layered content panels, one shown at a time, switched by an accessible tab list. - [Textarea](https://createui.co/docs/components/textarea): Multi-line text input for longer prose, with built-in size, state, and resize controls. - [Text Link](https://createui.co/docs/components/text-link): Inline anchor for in-body links that stay inside the flow of text. - [Toast](https://createui.co/docs/components/toast): Transient, screen-level notification that confirms an action or surfaces a short-lived message. - [Tooltip](https://createui.co/docs/components/tooltip): Short hover hint that names a control or explains a brief detail. ## Schemas - [Registry Schema](https://createui.co/schema/registry.json): JSON Schema for registry index files. Defines a collection of components, hooks, pages, and other items. - [Registry Item Schema](https://createui.co/schema/registry-item.json): JSON Schema for individual registry items, with properties for dependencies, files, Tailwind config, CSS variables, and more. ## Products - [Figma Design System](https://createui.co/#design-system): Tokens, variables, components, and usage rules in Figma. - [Pricing](https://createui.co/pricing): Design, Code, and Complete plans for individuals and teams. ## Resources - [Blog](https://createui.co/blog): Tutorials, design system deep dives, and component breakdowns - [Help Center](https://help.createui.co): Product, licensing, and technical guidance. - [Roadmap](https://feedback.createui.co/roadmap): Planned components and features. - [Feedback](https://feedback.createui.co): Feature requests and support. ## Optional - [Privacy Policy](https://createui.co/legal/privacy) - [Terms of Use](https://createui.co/legal/terms-of-use) - [License Agreement](https://createui.co/legal/license) - [Cookie Policy](https://createui.co/legal/cookies)