December 2023 - New Components

We've added new components to shadcn/ui and made a lot of improvements to the CLI.

Here's a quick overview of what's new:

• Carousel - A carousel component with motion, swipe gestures and keyboard support.
• Drawer - A drawer component that looks amazing on mobile.
• Pagination - A pagination component with page navigation, previous and next buttons.
• Resizable - A resizable component for building resizable panel groups and layouts.
• Sonner - The last toast component you'll ever need.
• CLI updates - Support for custom Tailwind prefix and tailwind.config.ts.

Carousel

We've added a fully featured carousel component with motion, swipe gestures and keyboard support. Built on top of Embla Carousel.

It has support for infinite looping, autoplay, vertical orientation, and more.

import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"

Drawer

Oh the drawer component. Built on top of Vaul by emilkowalski.

Try opening the following drawer on mobile. It looks amazing!

"use client"

import * as React from "react"

Pagination

We've added a pagination component with page navigation, previous and next buttons. Simple, flexible and works with your framework's <Link /> component.

import {
  Pagination,
  PaginationContent,

Resizable

Build resizable panel groups and layouts with this <Resizable /> component.

import {
  ResizableHandle,
  ResizablePanel,

<Resizable /> is built using react-resizable-panels by bvaughn. It has support for mouse, touch and keyboard.

Sonner

Another one by emilkowalski. The last toast component you'll ever need. Sonner is now availabe in shadcn/ui.

"use client"

import { toast } from "sonner"

CLI updates

This has been one of the most requested features. You can now configure a custom Tailwind prefix and the cli will automatically prefix your utility classes when adding components.

This means you can now easily add shadcn/ui components to existing projects like Docusaurus, Nextra...etc. A drop-in for your existing design system with no conflict.

Copy<AlertDialog className="tw-grid tw-gap-4 tw-border tw-bg-background tw-shadow-lg" />

It works with cn, cva and CSS variables.

The cli can now also detect tailwind.config.ts and add the TypeScript version of the config for you.

That's it. Happy Holidays.