v1.5
Buy Pro

Changelog

New components, tokens, and tooling for Create UI. Updates land here as they ship.

Create UI 1.5

AI chat components, Pro blocks, data components, and a neutral theme.

Create UI 1.5 is the biggest update since 1.0. It adds a full family of AI chat components, a new catalog of 73 Pro blocks, and the data components you need for dashboards: Table, Calendar, Date Picker, and Tree View. Toast gained a real queue, menus learned submenus and search, and a new neutral theme joins the palette. Here is what changed since 1.0.

New components

1.5 adds 24 components: 22 to Pro and 2 to the free registry.

Free (2).

  • Featured Icon puts an icon in a colored box, with primary, neutral, danger, success, warning, info, and away variants, solid, soft, neutral, and outline appearances, and six sizes from 2xs to xl. The Pro version adds a stylish type with a gradient fill and ring. It is also what ModalIcon renders now.
  • Placeholder Logo draws fictional brand logos for mockups and templates: 11 brands (Orbit, Spark, Nexus, Prism, Wellspring, Oasis, Vertex, Sentinel, Atlas, Bloom, and Create UI) as a lockup, mark, or round badge, in brand color or neutral monochrome, with a solid or gradient fill. It follows dark mode on its own, and the Create UI logo takes your primary color.
pnpm dlx @create-ui/cli add featured-icon placeholder-logo

Pro (22). By area:

  • AI: Chat Message, Chat Message Actions, Chat Conversation, Chat List View, Chat Loader, Chat Attachment, Chat Source, Chat Tool, Chain of Thought, Prompt Input (with the Prompt Input Queue and Prompt Input Tokens add-ons), Prompt Suggestion, Markdown, and Text Shimmer
  • Data: Table, Tree View, Filter Bar, and Sparkline
  • Dates: Calendar and Date Picker
  • Visual: Mesh Gradient

AI components

A new AI Components group in the docs covers everything you need to build a chat interface. Each piece works on its own, so you can use one or all of them.

  • Prompt Input is the chat composer. It comes in stacked, compact, and inline layouts, grows with its text, and turns its send button into a stop button while a response streams. The Queue add-on lists follow-up prompts you can reorder by dragging or with the arrow keys. The Tokens add-on brings inline @mentions and /commands.
  • Chat Message renders one turn from the assistant or the user, with avatar, bubble, content, and media slots. Chat Message Actions adds the usual row below it: copy, thumbs up and down, regenerate, and an overflow menu.
  • Chat Conversation is the scrolling log. It follows new content as it streams, stops following when the reader scrolls up, and offers a button to jump back down.
  • Markdown renders model output with Create UI typography. While streaming it fades new words in, shows a caret, and repairs unclosed syntax, and code blocks come with a copy button.
  • Chat Tool shows a single tool call as a collapsible card, with arguments, result, errors, and an approve or reject step. Its state follows the AI SDK tool lifecycle.
  • Chain of Thought is a collapsible reasoning timeline with pending, active, complete, and error steps, including nested ones.
  • Chat Source adds inline citation pills with a hover preview, plus a collapsible list of every source.
  • Chat Attachment shows image and video thumbnails or file cards, with upload and error states, and a picker that also takes drops and pasted images.
  • Chat Loader has dots, pulse, and spinner indicators, plus a message-shaped skeleton.
  • Chat List View lists chat threads with a selected row, a preview, and per-row actions. It needs no client state, so it works as a Server Component.
  • Prompt Suggestion shows starter prompts for an empty chat, as pills or cards.
  • Text Shimmer sweeps a highlight across text for "thinking" states, and settles into plain text when active is false.
pnpm dlx @create-ui/cli add prompt-input chat-message chat-conversation markdown

Data and dates

  • Table is a real <table> built on React Aria. It supports row selection, sorting, resizable columns, columns pinned to either edge, a sticky header, and drag-and-drop row reordering. It also covers empty, loading, load-more, and infinite-scroll states, a totals footer, and pagination, and a useTableSelection hook comes with it.
  • Tree View is a hierarchical list with full keyboard navigation and typeahead. It has cascading checkbox selection, drag-and-drop, and none, line, or elbow connector guides.
  • Filter Bar is the toolbar that sits above a table or list, in segmented, tabs, search, and selected variants. The selected variant is a tinted bulk-action bar. Its size cascades to every control inside it.
  • Sparkline is a small line or bar trend chart. It colors itself by direction and fades at both edges.
  • Calendar supports single, multiple, and range selection, a month and year picker, a presets rail, and a footer with actions. It comes in lg and md sizes and rounded, pill, and square shapes.
  • Date Picker opens a Calendar from a trigger that looks and sizes like an Input, presets included.
pnpm dlx @create-ui/cli add table tree-view filter-bar calendar date-picker

Introducing Blocks

Blocks are complete, ready-made screens and sections built from Create UI components. 1.5 opens the catalog with 73 Pro blocks in 7 categories.

  • Authentication (12): sign up, sign in, phone sign in, OTP, forgot password, new password with a strength meter, check your email, verification failed, SSO, two-factor, magic link, and account locked.
  • Authentication Plain (12): the same 12 flows as full-screen layouts without a card.
  • Menus (24): file and folder menus, sort, member and assignee pickers, status, tags, account, workspace switcher, column visibility, AI model picker, bulk actions, share and permissions, and loading, error, and empty states.
  • Overlay (15): confirmation, destructive with type to confirm, create, success, error, feedback, warning, share, session timeout, cookie consent, what's new, filters, rename, and cart.
  • Header Navigation (5): from a marketing top bar with a mobile drawer to floating compact and pill headers.
  • Sidebar Navigation (3): CRM, crypto, and HR app sidebars, two of them collapsible to an icon rail.
  • Sections (2): page headers with actions or a search field.

Browse them at /blocks. Every block has a live preview you can switch between mobile, tablet, and desktop, resize by dragging, and view in light or dark. With a seat, you can read each block's source in a code viewer with a file tree, then install it in one command. Sub-components and dependencies come along.

pnpm dlx @create-ui/cli add auth-01

New in existing components

  • Toast has a real queue now. Mount <Toaster /> once, then call toast() from anywhere, or use the useToast() hook. Toasts stack in any corner and expand on hover, and hovering or focusing the stack pauses their timers. Set a per-toast duration, or pass null to keep a toast open until it is dismissed.
  • Dropdown Menu gained nested submenus with Dropdown.Sub and a pinned search field with Dropdown.Search. DropdownPopover can filter its items through filter, query, and onQueryChange. Long menus scroll inside a Scroll Area now.
  • Context Menu gained submenus through ContextMenu.Sub, and a defaultOpen prop. Right-clicking while the menu is open moves it to the cursor.
  • Combobox opens its list when you click the input, and the list matches the width of the whole field.
  • Phone Input detects the country when you paste an international number, stops input at the country's maximum length, and keeps the caret in place while it reformats. Its details report isPossible and isValid, and a new countryLabel prop labels the country select.
  • Stepper stacks vertically on mobile by default. Pass responsive={false} to opt out.
  • Separator supports direction="vertical" in the free version.
  • Avatar Group takes a ring prop of white or black for the rings between overlapping avatars.
  • Textarea uses the same overlay scrollbar as Scroll Area, which takes a new viewportClassName prop.
  • Social Login Button takes children to replace its "Continue with" label.
  • Pro Navbar has a new mobile menu: a drawer from the right with a backdrop, scroll lock, and focus trap. It adds collapsible NavbarMenuGroup sections, plus labels, separators, a sticky footer, and item descriptions.
  • Pro Alert Banner has a new auto layout that stacks on mobile and switches to a row from md up.
  • Pro Input Stepper animates its value digit by digit.
  • Pro Pagination shows a three-page window on mobile, and its page-jump input only accepts digits.
  • Pro Sidebar scrolls its content with edge fades.
  • Pro Popover: PopoverClose takes children for a custom close control.

Before you upgrade

A few changes need a look if you are coming from 1.0.

Renamed sizes

  • Pro Modal sizes are now md, lg, and cover. The old sm is md and the old md is lg. The default is still md, but it now means the smaller 430px modal, so a modal on the default grows smaller. ModalIcon follows the Featured Icon size scale, and the modalIconVariants export was removed.
  • Pro Command sizes are now md and lg, and the default moved to lg. A default palette looks the same, but an explicit size="md" now renders the smaller one.
  • Input OTP sizes are now lg, sm, and xs. The old sm is xs, md was removed, and lg and sm scale down below the lg breakpoint.
// Before
<Modal size="sm" />
<InputOTP size="sm" />
// After
<Modal size="md" />
<InputOTP size="xs" />

New defaults. If you relied on a default, set the value explicitly.

  • The default size moved to sm for Stepper, Switch, Switch Group, Radio, Radio Group, Checkbox Group, Breadcrumb, and Pro Alert Banner. It moved to xs for Dropdown Menu and Text Link.
  • Close Button now defaults to the soft appearance and the pill shape.
  • Pro Alert Banner defaults to the new auto layout, and Pro Rating to the fade animation.

API and markup

  • usePhoneInput: onValueChange receives a value object now, not a digit string: { value, country, dialCode, nationalNumber, isPossible, isValid }.
  • Pro Navbar: NavbarMenu is a modal drawer now and hides from md up. For the old card under the bar, pass anchor="bar".
  • Textarea always renders inside a data-slot="textarea-wrapper" element, and Label is w-fit instead of w-full. Check any custom CSS that targets them.
  • Free Input Stepper no longer animates its digits. The animated version lives in the Pro Input Stepper.

CLI, MCP, and the agent skill

  • init --theme neutral sets up the new neutral primary theme.
  • init -t next-monorepo installs the full token layer now, and respects --theme, --neutral, and --font-variant. With npm, yarn, or bun it stops early and tells you to use pnpm.
  • init no longer writes self-referencing font variables that could break next/font, and it removes the default @theme tokens and body font that create-next-app adds.
  • add installs blocks with the same seat that unlocks Pro components.
  • MCP: example search ranks results by name and returns fewer off-topic hits, and returned code uses your project's import paths (@/components/ui, @/hooks, @/lib).
  • Agent skill: covers every new component, knows the neutral theme, and has new guidance on picking valid icon names, Server and Client Component boundaries, and accessible menus.

Theming

  • Neutral theme. A new neutral primary theme maps the primary scale onto your selected neutral scale, for a monochrome interface.
  • Headings. heading-h5 is 18, 20, and 24px across mobile, tablet, and desktop (it was 16, 18, and 24px), and heading-h6 is 16, 18, and 20px (it was 16, 16, and 20px). Re-run init or re-add index to pick them up.

Docs and site

  • Asset library. A new searchable catalog at /assets for everything in @create-ui/assets: flags, banks, brands, payments, app store badges, social marks, and the full icon set, with install commands for every package manager.
  • New to Code. A step-by-step guide from opening a terminal to adding your first component, with an optional build-with-AI path.
  • Foundation pages rebuilt. Colors, Typography, Spacing, Rounded, and Shadows have per-breakpoint token tables, light and dark splits, and click-to-copy tokens.
  • Better previews. Component previews resize by dragging, report their height more reliably, and use the same preview frame as the blocks catalog.

Fixes and polish

Accessibility

  • Chip activates with Enter and Space, is focusable only when clickable, and its remove button can be reached by keyboard.
  • Radio Group passes disabled and invalid down to every radio.
  • Pro Input Tag puts its id and aria-label on the real input, so <label htmlFor> works.
  • Pro Info Tooltip triggers have an accessible label.
  • Scroll Area and Input OTP use outline focus styles.

Invalid states. Switch, Checkbox, Radio, and Text Link show an error color when invalid.

Visual

  • Select aligns its selected label with the placeholder.
  • Select, Combobox, and Dropdown Menu separators are unified.
  • Disabled dropdown items dim their description.
  • Segmented Control keeps its indicator in place inside zooming modals and popovers.
  • Pro Modal clips its bottom corners and keeps content inside its padding.
  • Inline Alert titles truncate, and Breadcrumb items no longer wrap.
  • Textarea keeps its focus border in Safari.
  • Accordion dropped a hard minimum width.

The full library

The free registry now spans 50 components, with 35 Pro-only components and 73 Pro blocks on top.

Free (50): 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, Featured Icon, Field, Inline Alert, Input, Input Group, Input OTP, Input Stepper, Label, Pagination, Phone Input, Placeholder Logo, 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 (35): Alert Banner, Calendar, Chain of Thought, Chat Attachment, Chat Conversation, Chat List View, Chat Loader, Chat Message, Chat Message Actions, Chat Source, Chat Tool, Command, Date Picker, FAB Button, File Format, File Upload, Filter Bar, Info Tooltip, Input Tag, Markdown, Mesh Gradient, Modal, Navbar, Password Strength, Popover, Prompt Input, Prompt Input Queue, Prompt Input Tokens, Prompt Suggestion, Rating, Sidebar, Sparkline, Table, Text Shimmer, Tree View.

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

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

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.

The Big Bang

The first release of Create UI. One foundation, many themes, and a registry-driven CLI you own.

This is where Create UI starts. We kept the part of the copy-paste component model that worked and rebuilt the foundation underneath it from scratch.

One system, many themes

The old split between a style system and a base system is gone. There is a single styling foundation now. Light, dark, and brand variants sit on top of it through semantic tokens, so a theme is a set of values rather than a parallel copy of every component.

Semantic tokens, straight from Figma

Spacing, radius, shadows, and typography ship as semantic tokens that map one to one with Figma variables. Component scales (--spacing-component-sm, -md, -lg) handle padding and gaps inside a component. Layout scales (--spacing-layout-sm, -md, -lg) handle section spacing. Dark mode and responsive breakpoints rescale the same token without touching component code.

The createui CLI

The CLI keeps the registry contract you already know under a new name.

pnpm dlx @create-ui/cli init
npx @create-ui/cli add button

init wires up your tokens and base files. add drops a component into your project, dependencies and all, as source you own.

What ships on day zero

The registry comes with the core primitives you reach for every day, plus the examples and docs that show how to compose them. Every component is yours to read and change the moment it lands in your project.

More components, blocks, and themes follow from here. Welcome to the Big Bang.