Changelog
Latest updates and announcements.
July 2026 - Base UI#
ui-x is now built on Base UI. Following shadcn/ui's adoption of Base UI as the modern successor to Radix UI, every component has been rebuilt on Base UI primitives and restyled to match the latest shadcn/ui design.
import {
DatePicker,
DatePickerCalendar,What's changed#
- Base UI everywhere — All Radix UI dependencies are gone. Components are built on Base UI primitives and utilities, with React 19 ref handling throughout.
- Restyled — Every component, demo and docs page has been refreshed against the latest shadcn/ui styling.
- Simpler forms — Demos use Base UI's
FieldandFormfor form plumbing. For React Hook Form or TanStack Form wiring, see the shadcn/ui forms guides. - Dropzone composes with Empty —
DropzoneGroup,DropzoneTitleandDropzoneDescriptionare gone. Build the zone's title and description with shadcn/ui's Empty component instead;DropzoneUploadIconstays for the drag-state icon swap.
Superseded components#
shadcn/ui now ships first-class versions of several components that ui-x originally existed to fill in. These have been removed in favor of the official ones:
| ui-x component | Use instead |
|---|---|
| Calendar | Calendar |
| Combobox | Combobox |
| Control Group | Button Group |
| File List | Attachment |
| Input Base | Input Group |
| Kbd | Kbd |
| Native Select | Native Select |
June 2025 - Phone Input and Emoji Picker#
We've added a new <PhoneInput /> component and a new <EmojiPicker /> component.
Phone Input#
A component for phone number input field with country selection and formatting. Built on top of react-phone-number-input.
"use client";
import * as React from "react";Emoji Picker#
A component that allows users to select an emoji from a list of emojis. Built on top of frimousse.
"use client";
import { SmilePlusIcon } from "lucide-react";May 2025 - Tailwind v4 and React 19#
We're excited to announce support for Tailwind v4 and React 19! This major update brings significant improvements and new features to the UI components library. Please refer to shadcn/ui's Tailwind v4 documentation for more details on migrating your project and taking advantage of the new capabilities.
Wheel Picker#
Along with this major update, we've also added a new <WheelPicker /> component, built on top of react-wheel-picker. This component provides an iOS-like interface for selecting options from a scrollable wheel.
- React
- Vue
- Angular
- Svelte
- React
- Vue
- Angular
- Svelte
"use client";
import * as React from "react";February 2025 - Virtualizer#
We've added a new Virtualizer documentation page.
Virtualizer#
Learn how to use the virtua library to efficiently render large lists and grids by virtualizing your components. This documentation provides practical examples and guidance on integrating virtua with your existing components.
"use client";
import { Card, CardContent } from "@/components/ui/card";February 2025 - Sortable and Control Group#
We've added a new <Sortable /> component and a new <ControlGroup /> component.
Sortable#
A drag and drop component for reordering items in a list or grid. <Sortable /> is built on top of @dnd-kit's sortable preset.
"use client";
import { arrayMove } from "@dnd-kit/sortable";Control Group#
A component for grouping form controls like text inputs, buttons, selects and other elements into a single cohesive unit. When used together with Input Base, you can create highly customizable and flexible input layouts for a variety of use cases. Control Group has since been superseded by shadcn/ui's Button Group.
Thank you#
I'd like to thank everyone who has been using this project, providing feedback and contributing to it. I really appreciate it. Thank you 🙏