307

Changelog

Latest updates and announcements.

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";

Read the docs

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";

Read the docs

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
"use client";

import * as React from "react";

Read the docs

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";

Read the docs

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.

Introduction to React
Learn the basics of React and component-based architecture
State Management
Explore different state management solutions in React
React Hooks
Master the use of hooks for state and side effects
Performance Optimization
Techniques to optimize React application performance
Testing React Apps
Learn testing strategies and tools for React applications
React Router
Implement client-side routing in React applications
Server Components
Build server-rendered React components for better performance
React Query
Manage server state and caching in React applications
"use client";

import { arrayMove } from "@dnd-kit/sortable";

See more examples

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 🙏