v1.0
Buy Pro

Create UI 1.0

New components, a new Pro tier, and refinements across the library.

Create UI reaches 1.0. The free foundation grew with new primitives, the Select and menu components were rebuilt on a stronger accessibility core, and there is a new Pro tier for the components that take more work to get right. Everything you already had is still yours to read and change. Here is what changed since the first release.

New components

1.0 adds 19 components: 6 to the free registry and 13 to the new Pro tier, plus richer Pro versions of 6 components you already had.

Free (6). Each ships with examples and docs.

  • Stepper for multi-step flows, with horizontal and vertical layouts, backed by a use-stepper hook you own.
  • Slider with primary and neutral variants and xs, sm, md sizes.
  • Tabs with a size axis and content panels.
  • Dropzone for drag-and-drop file input, with accept and size validation, backed by a use-dropzone hook.
  • Context Menu for right-click menus, sharing the same shell as the dropdown.
  • Combobox for a type-to-filter picker, built on React Aria. It binds to a Field, filters as you type, and can keep an off-list typed value through allowsCustomValue.
pnpm dlx @create-ui/cli add stepper slider tabs dropzone context-menu combobox

Pro (13). New Pro-only components. See Introducing Pro for what each does and how access works.

  • Modal, Command, Popover, Info Tooltip (overlays)
  • Alert Banner (feedback)
  • Sidebar, Navbar (navigation)
  • File Upload, Input Tag, Password Strength, Rating (form controls)
  • FAB Button (actions)
  • File Format (assets)

Pro upgrades (6). Free components that gained a richer Pro version on top of their free base.

  • Tabs, Slider, Pagination, Separator, Input Stepper, Tab Menu

Introducing Pro

The Pro library ships in code for the first time, at full parity with the Figma system. These are the components you rebuild on every project, plus richer versions of a few you already use.

Pro comes in two shapes.

Pro components with no free version (13), by area:

  • Overlays: Modal (with Header and Footer parts, in small, medium, and cover sizes), Command palette, rich Popover, and Info Tooltip.
  • Feedback: Alert Banner, with solid inverse badges across every size.
  • Navigation: Sidebar and Navbar (header navigation). The Sidebar is a full app shell that animates between a 300px labelled panel and a 58px icon rail, with a brand header, grouped nav, per-item tooltips while collapsed, and Cmd/Ctrl+B to toggle.
  • Form controls: File Upload (row and dropzone modes), Input Tag, Password Strength, and Rating.
  • Actions: FAB Button, single and grouped.
  • Assets: the File Format icon set.

Pro upgrades to free components (6). Tabs, Slider, Pagination, Separator, Input Stepper, and Tab Menu ship a free base and a richer Pro version on top. The Pro Tabs, for example, adds vertical-button, vertical-line, horizontal-line, and horizontal-button variants and an indicator, on top of the free base.

Button Group, Breadcrumb, and Stepper stay free, and also gained advanced Pro examples in their docs.

A few components that were free in the first release are now part of Pro: Alert Banner, Command, Info Tooltip, Password Strength, and Popover. The old dialog was retired and replaced by the new Pro Modal, rebuilt with small, medium, and cover sizes.

Access works through the CLI. Log in once to attach your seat, then add Pro components the way you always have. To get the free base of a tiered component even with a seat, pass --free.

pnpm dlx @create-ui/cli login
npx @create-ui/cli add modal navbar rating
npx @create-ui/cli add tabs --free

Select and menus, rebuilt on React Aria

Select, Dropdown Menu, Combobox, and the new Context Menu now share one foundation built on React Aria Components. The result is better keyboard and screen-reader behavior and a more composable API. The new Combobox joins the family too: it is ListBox-based like Select but reuses the exact same item surface, so a row looks identical whether it sits in a Dropdown, a Select, or a Combobox.

Select gained the features people kept asking for.

  • Multi-select through selectionMode="multiple".
  • Searchable options with Select.Search, which filters the list as you type and is case and accent insensitive by default.
  • A controlled model using selectedKey and onSelectionChange.
  • A namespaced, fully composable API (Select.Trigger, Select.Content, Select.Item, Select.Search, and the item sub-parts).

Dropdown Menu now takes a selectionMode of "none", "single", or "multiple", with leading checkbox or radio controls chosen for you. Its item primitives are the shared base that Select and Context Menu build on, so the three feel identical at every size.

If you are coming from the first release, the selection model moved from a single value to keys. Reach for selectedKey and onSelectionChange in place of the old value handlers.

New in existing components

Beyond the rebuilt menus, a few components you already use grew more flexible.

  • Button takes leading and trailing content as children now, each independently toggleable, with the label hidden for icon-only usage.
  • Tab Menu leading is a flexible slot: drop in an icon, an avatar, a company logo, or anything else (an icon by default).
  • Popover and Info Tooltip expose their content as slots, so you bring your own body and remove what you do not need.

A renamed icon prop

The prop for a leading icon is now leading everywhere it appears, replacing the older leadingIcon and leadingIcons names. This touches every component that renders a leading icon, so it is a rename to make once across your project.

// Before
<Badge leadingIcon={<Icon />} />
// After
<Badge leading={<Icon />} />
  • Button no longer takes leadingIcon or trailingIcon. Pass icons as children instead.
  • Avatar renamed AvatarFallback to AvatarText, and removed the AvatarBackground and AvatarStroke sub-components (the new variant prop covers backgrounds).
  • Input Stepper renamed its variant values from connected and separated to split and detached, with split as the new default.
  • Tab Menu dropped the vertical-button, vertical-line, and horizontal-button variants from the free version. They live in the Pro Tab Menu now.
  • Dialog was removed. Use the Pro Modal in its place.
  • Icons moved from Remix Icon to the Create UI icon set. Update your icon imports to @create-ui/assets/icons.

CLI

The CLI learned to work with Pro.

  • login and logout authenticate the CLI through a device code so it can install Pro components.
  • add --free installs the free tier of a component even when you are logged in with a seat.
pnpm dlx @create-ui/cli login
npx @create-ui/cli logout

Theming and refinements

A deep pass across tokens, dark mode, interaction, and responsive behavior tightened the whole system.

Tokens

  • The neutral palette moved from a gray base to a zinc base system-wide for a more refined neutral scale, and the primary steps were retuned for contrast in light and dark.
  • Buttons (success, danger, and primary across outline, soft, and ghost) and Chips now use semantic tokens like success-base, error-base, and primary-base instead of raw color values, so theming and overrides are cleaner.
  • Added a neutral color family to the primary color tokens and a new stroke-static variable.
  • The default monospace font is now Geist Mono.

Dark mode

  • Solid Badges and File Format icons use static colors now, so text and icons stay correct in dark mode instead of flipping.
  • Alert Banner inverse badges are solid across all sizes.
  • Dropdown item hover uses proper body colors, and Label info tooltips moved from inverse to neutral.

Interaction

  • Close Button, Checkbox, Radio, and Button share one press interaction now: full opacity with a subtle scale for a more tactile feel.
  • Deeper hover states across Checkbox, Radio, and Button, and deeper hover shadows for Primary, Error, Success, and Info.

Responsive and spacing

  • The responsive system is finalized: responsive radius is complete, and the heading, display, body, and paragraph type scales were updated. Line heights use percentage values now for cleaner scaling.
  • Spacing refined with component-level tokens across Alert Banner, Modal Footer, and Info Tooltip.

The full library

The free registry now spans 48 components, with 13 Pro-only components layered on top and full parity to the Figma system.

Free (48): Accordion, App Store Badge, Aspect Ratio, Avatar, Badge, Breadcrumb, Button, Button Group, Checkbox, Checkbox Group, Chip, Close Button, Combobox, Context Menu, Country Flag, Credit Card Input, Date Input, Dropdown Menu, Dropzone, Field, Inline Alert, Input, Input Group, Input OTP, Input Stepper, Label, Pagination, Phone Input, Progress, Radio, Radio Group, Scroll Area, Segmented Control, Select, Separator, Slider, Social Login Button, Spinner, Status Badge, Stepper, Switch, Switch Group, Tab Menu, Tabs, Text Link, Textarea, Toast, Tooltip.

Pro (13): Alert Banner, Command, FAB Button, File Format, File Upload, Info Tooltip, Input Tag, Modal, Navbar, Password Strength, Popover, Rating, Sidebar.

Of these, Input Stepper, Pagination, Separator, Slider, Tab Menu, and Tabs ship a free base plus a richer Pro version.

More components and themes follow from here, and everything you add stays source you own.