ContextQMD
Back to Shadcn Ui

December 2023 - New Components

apps/v4/content/docs/changelog/2023-12-new-components.mdx

latest2.6 KB
Original Source

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.

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.

<ComponentPreview name="carousel-demo" />

Drawer

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

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

<ComponentPreview name="drawer-demo" />

Pagination

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

<ComponentPreview name="pagination-demo" />

Resizable

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

<ComponentPreview name="resizable-demo-with-handle" />

<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 available in shadcn/ui.

<ComponentPreview name="sonner-demo" />

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.

tsx
<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.