--- title: December 2023 - New Components | daily.dev description: Shadcn/ui's December 2023 update introduces five new components: Carousel (built on Embla Carousel, with swipe and keyboard support), Drawer (built on Vaul,... canonical: https://daily.dev/posts/december-2023---new-components-jahnp7xkv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: December 2023 - New Components | daily.dev og:description: Shadcn/ui's December 2023 update introduces five new components: Carousel (built on Embla Carousel, with swipe and keyboard support), Drawer (built on Vaul,... og:url: https://daily.dev/posts/december-2023---new-components-jahnp7xkv og:image: https://api.daily.dev/og/posts/jaHnp7xKV.png og:image:alt: December 2023 - New Components og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # December 2023 - New Components **[The Foundation for your Design System - shadcn/ui](https://daily.dev/sources/shadcn-ui)** · 2 min read · 0 upvotes · 0 comments ## Summary Shadcn/ui's December 2023 update introduces five new components: Carousel (built on Embla Carousel, with swipe and keyboard support), Drawer (built on Vaul, optimized for mobile), Pagination, Resizable (built on react-resizable-panels), and Sonner (a toast component). The CLI now supports custom Tailwind prefixes so components can be dropped into existing design systems without class conflicts, and it auto-detects tailwind.config.ts to add the TypeScript config version. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What new components were added to shadcn/ui in the December 2023 update? Five components were added: Carousel (built on Embla Carousel with motion, swipe gestures, and keyboard support), Drawer (built on Vaul, optimized for mobile), Pagination (with page navigation and previous/next buttons), Resizable (built on react-resizable-panels for resizable panel layouts), and Sonner, a toast component. _See how daily.dev tracks new shadcn/ui component releases for teams building design systems._ ### Can I use a custom Tailwind CSS class prefix with the shadcn/ui CLI? Yes, the shadcn/ui CLI supports configuring a custom Tailwind prefix, automatically prefixing utility classes when adding components. This lets shadcn/ui components be dropped into existing projects like Docusaurus or Nextra without conflicting with an existing design system, and it works with cn, cva, and CSS variables. _Developers integrating shadcn/ui into existing codebases can follow CLI updates like this on daily.dev._ ### What library powers the Drawer component in shadcn/ui? The Drawer component is built on top of Vaul, a library created by emilkowalski, and is designed to look good specifically on mobile devices. The same developer also built Sonner, the toast component added in the same update. _Track which underlying libraries power your favorite UI kits by following shadcn/ui updates on daily.dev._ ## Similar posts on daily.dev - [The 13 best Tailwind CSS component libraries](https://daily.dev/posts/the-13-best-tailwind-css-component-libraries-md6ki7iso) · LogRocket · 21 upvotes · 1 comments - [How to Build Production-Ready Card Components with shadcn/ui](https://daily.dev/posts/how-to-build-production-ready-card-components-with-shadcn-ui-4q8tpunme) · freeCodeCamp · 4 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#cli](https://daily.dev/tags/cli), [#tailwind-css](https://daily.dev/tags/tailwind-css), [#shadcn](https://daily.dev/tags/shadcn) [View this post on daily.dev](https://daily.dev/posts/december-2023---new-components-jahnp7xkv) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"December 2023 - New Components","url":"https://daily.dev/posts/december-2023---new-components-jahnp7xkv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/december-2023---new-components-jahnp7xkv"},"datePublished":"2026-08-23T12:17:51.955Z","dateModified":"2026-08-23T12:22:42.429Z","description":"Shadcn/ui's December 2023 update introduces five new components: Carousel (built on Embla Carousel, with swipe and keyboard support), Drawer (built on Vaul,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1fd9e2a106719c1861c399265a4c8feb?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1fd9e2a106719c1861c399265a4c8feb?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"The Foundation for your Design System - shadcn/ui","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"The Foundation for your Design System - shadcn/ui","logo":"https://media.daily.dev/image/upload/s--GiOq6F7Y--/f_auto,q_auto/v1787487441/logos/shadcn-ui?_a=BAMAMicg0","url":"https://daily.dev/sources/shadcn-ui"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/december-2023---new-components-jahnp7xkv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,cli,tailwind-css,shadcn","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"The Foundation for your Design System - shadcn/ui","item":"https://daily.dev/sources/shadcn-ui"},{"@type":"ListItem","position":3,"name":"December 2023 - New Components"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/december-2023---new-components-jahnp7xkv#faq","mainEntity":[{"@type":"Question","name":"What new components were added to shadcn/ui in the December 2023 update?","acceptedAnswer":{"@type":"Answer","text":"Five components were added: Carousel (built on Embla Carousel with motion, swipe gestures, and keyboard support), Drawer (built on Vaul, optimized for mobile), Pagination (with page navigation and previous/next buttons), Resizable (built on react-resizable-panels for resizable panel layouts), and Sonner, a toast component. See how daily.dev tracks new shadcn/ui component releases for teams building design systems."}},{"@type":"Question","name":"Can I use a custom Tailwind CSS class prefix with the shadcn/ui CLI?","acceptedAnswer":{"@type":"Answer","text":"Yes, the shadcn/ui CLI supports configuring a custom Tailwind prefix, automatically prefixing utility classes when adding components. This lets shadcn/ui components be dropped into existing projects like Docusaurus or Nextra without conflicting with an existing design system, and it works with cn, cva, and CSS variables. Developers integrating shadcn/ui into existing codebases can follow CLI updates like this on daily.dev."}},{"@type":"Question","name":"What library powers the Drawer component in shadcn/ui?","acceptedAnswer":{"@type":"Answer","text":"The Drawer component is built on top of Vaul, a library created by emilkowalski, and is designed to look good specifically on mobile devices. The same developer also built Sonner, the toast component added in the same update. Track which underlying libraries power your favorite UI kits by following shadcn/ui updates on daily.dev."}}]} ```