{"id":"src_ZSnXvrVVEtCx39NE1qiCD","slug":"shadcn-ui","name":"shadcn/ui","type":"feed","url":"https://ui.shadcn.com/docs/changelog","orgId":"org_4UWTRLB80lFyOiJq7jrsO","org":{"slug":"shadcn","name":"shadcn"},"isPrimary":true,"metadata":"{\"feedUrl\":\"https://ui.shadcn.com/rss.xml\",\"feedType\":\"rss\",\"feedDiscoveredAt\":\"2026-04-01T21:35:37.887Z\",\"noFeedFound\":false,\"feedEtag\":\"\\\"142b02ea5dbe0cbef01cee9c65272de7\\\"\",\"feedContentLength\":\"15653\"}","releaseCount":37,"releasesLast30Days":4,"avgReleasesPerWeek":0.7,"latestVersion":null,"latestDate":"2026-04-16T00:00:00.000Z","changelogUrl":null,"hasChangelogFile":false,"lastFetchedAt":"2026-04-20T12:01:51.811Z","lastPolledAt":"2026-04-21T04:01:03.090Z","trackingSince":"2023-06-22T00:00:00.000Z","releases":[{"id":"rel_tsVPEDympTGTDMtPuwMvU","version":null,"title":"April 2026 - Introducing Sera","summary":"Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.","content":"Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.","publishedAt":"2026-04-16T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-04-sera","media":[]},{"id":"rel_i8uhrWFO70gBTq5Gt6BSH","version":null,"title":"April 2026 - shadcn apply","summary":"Switch presets in existing projects without starting over.","content":"Switch presets in existing projects without starting over.","publishedAt":"2026-04-08T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-04-shadcn-apply","media":[]},{"id":"rel_YrnXNuVby36isls22lIS1","version":null,"title":"April 2026 - Component Composition","summary":"Composition sections across component pages—structured trees that help you and your agents build correct UI.","content":"Composition sections across component pages—structured trees that help you and your agents build correct UI.","publishedAt":"2026-04-06T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-04-component-composition","media":[]},{"id":"rel_HSQAw5Cgp_GY3G1bvnCvW","version":null,"title":"March 2026 - Introducing Luma","summary":"Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe, minus the glass.","content":"Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe, minus the glass.","publishedAt":"2026-03-31T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-03-luma","media":[]},{"id":"rel_zYB4aJUwmUAFHT7eJo1bQ","version":null,"title":"March 2026 - shadcn/cli v4","summary":"# March 2026 - shadcn/cli v4\n\nMore capable, easier to use. Built for you and your coding agents. Skills, presets, dry run, new templates, monorepo and...","content":"# March 2026 - shadcn/cli v4\n\nMore capable, easier to use. Built for you and your coding agents. Skills, presets, dry run, new templates, monorepo and more.\n\n## shadcn/skills\n\nshadcn/skills gives coding agents the context they need to work with your components and registry correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns and registry workflows. The skill also knows how to use the shadcn CLI, when to invoke it and which flags to pass. Agents make fewer mistakes and produce code that actually matches your design system.\n\nYou can ask your agent things like:\n- \"create a new vite monorepo\"\n- \"find me a hero from tailark, add it to the homepage, animate the text using an animation from react-bits\"\n- \"install and configure a sign in page from @clerk\"\n\n```\npnpm dlx skills add shadcn/ui\n```\n\n## Introducing --preset\n\nA preset packs your entire design system config into a short code. Colors, theme, icon library, fonts, radius. One string, everything included.\n\nBuild your preset on shadcn/create, preview it live and grab the code when you're ready.\n\n```\npnpm dlx shadcn@latest init --preset a1Dg5eFl\n```\n\nUse it to scaffold projects from custom config, share with your team or publish in your registry. Drop it in prompts so your agent knows where to start. Use it across Claude, Codex, v0, Replit. Take your preset with you.\n\n## Switching presets\n\nWhen you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run `init --preset` in your app, and the CLI will take care of reconfiguring everything, including your components.\n\n```\npnpm dlx shadcn@latest init --preset ad3qkJ7\n```\n\n## Skills + Presets\n\nYour agent knows how to use presets. Scaffold a project, switch design systems, try something new.\n\n- \"create a new next app using --preset adtk27v\"\n- \"let's try --preset adtk27v\"\n\n## New shadcn/create\n\nTo help you build custom presets, we rebuilt shadcn/create. It now includes a library of UI components you can use to preview your presets. See how your colors, fonts and radius apply to real components before you start building.\n\n## New --dry-run, --diff, and --view flags\n\nInspect what a registry will add to your project before anything gets written. Review the payload yourself or pipe it to your coding agent for a second look.\n\n```\npnpm dlx shadcn@latest add button --dry-run\nnpx shadcn@latest add button --diff\nnpx shadcn@latest add button --view\n```\n\n## Updating primitives\n\nYou can use the `--diff` flag to check for registry updates. Or ask your agent: \"check for updates from @shadcn and merge with my local changes\".\n\n```\npnpm dlx shadcn@latest add button --diff\n```\n\n## shadcn init --template\n\n`shadcn init` now scaffolds full project templates for Next.js, Vite, Laravel, React Router, Astro and TanStack Start. Dark mode included for Next.js and Vite.\n\n```\npnpm dlx shadcn@latest init\n\nSelect a template › - Use arrow-keys. Return to submit.\n❯ Next.js\n Vite\n TanStack Start\n React Router\n Astro\n Laravel\n```\n\nUse `--monorepo` to set up a monorepo.\n\n```\npnpm dlx shadcn@latest init -t next --monorepo\n```\n\n## shadcn init --base\n\nPick your primitives. Use `--base` to start a project with Radix or Base UI.\n\n```\npnpm dlx shadcn@latest init --base radix\n```\n\n## shadcn info\n\nThe `info` command now shows the full picture: framework, version, CSS vars, which components are installed, and where to find docs and examples for every component. Great for giving coding agents the context they need to work with your project.\n\n```\npnpm dlx shadcn@latest info\n```\n\n## shadcn docs\n\nGet docs, code and examples for any UI component right from the CLI. Gives your coding agent the context to use your primitives correctly.\n\n```\npnpm dlx shadcn@latest docs combobox\n\ncombobox\n - docs https://ui.shadcn.com/docs/components/radix/combobox\n - examples https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx\n - api https://base-ui.com/react/components/combobox\n```\n\n## registry:base and registry:font\n\nRegistries can now distribute an entire design system as a single payload using `registry:base`. Components, dependencies, CSS vars, fonts, config. One install, everything set up.\n\nFonts are now a first-class registry type. Install and configure them the same way you install components.\n\n```json\n{\n \"$schema\": \"https://ui.shadcn.com/schema/registry-item.json\",\n \"name\": \"font-inter\",\n \"type\": \"registry:font\",\n \"font\": {\n \"family\": \"'Inter Variable', sans-serif\",\n \"provider\": \"google\",\n \"import\": \"Inter\",\n \"variable\": \"--font-sans\",\n \"subsets\": [\"latin\"]\n }\n}\n```\n\n```\npnpm dlx shadcn@latest add font-inter\n```","publishedAt":"2026-03-06T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-03-cli-v4","media":[]},{"id":"rel_-_irA3dhGreWi46hFVtwH","version":null,"title":"February 2026 - Blocks for Radix and Base UI","summary":"# February 2026 - Blocks for Radix and Base UI\n\nAll blocks are now available for both Radix and Base UI.\n\n* **All blocks for both libraries** - Every ...","content":"# February 2026 - Blocks for Radix and Base UI\n\nAll blocks are now available for both Radix and Base UI.\n\n* **All blocks for both libraries** - Every block, including login, signup, sidebar and dashboard blocks, is now available in both Radix and Base UI variants.\n* **Same CLI workflow** - Run `npx shadcn add` and the CLI will pull the correct block variant based on your project configuration.\n\nIf you've already set up your project with `npx shadcn create`, blocks will automatically use your chosen library. No additional configuration needed.\n\n```\npnpm dlx shadcn@latest add login-01\n```\n\nBrowse the full collection on the blocks page.","publishedAt":"2026-02-06T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-02-blocks","media":[]},{"id":"rel_Jp12z1RSXDerBzzZichmQ","version":null,"title":"February 2026 - Unified Radix UI Package","summary":"# February 2026 - Unified Radix UI Package\n\nThe `new-york` style now uses the unified `radix-ui` package instead of individual `@radix-ui/react-*` pac...","content":"# February 2026 - Unified Radix UI Package\n\nThe `new-york` style now uses the unified `radix-ui` package instead of individual `@radix-ui/react-*` packages.\n\n## What's Changed\n\nWhen you add components using the `new-york` style, they will now import from `radix-ui` instead of separate packages:\n\n```\n- import * as DialogPrimitive from \"@radix-ui/react-dialog\"\n+ import { Dialog as DialogPrimitive } from \"radix-ui\"\n```\n\nThis results in a cleaner `package.json` with a single `radix-ui` dependency instead of multiple `@radix-ui/react-*` packages.\n\n## Migrating Existing Projects\n\nIf you have an existing project using the `new-york` style, you can migrate to the new `radix-ui` package using the migrate command:\n\n```\npnpm dlx shadcn@latest migrate radix\n```\n\nThis will update all imports in your UI components and add `radix-ui` to your dependencies.\n\nTo migrate components outside of your `ui` directory, use the `path` argument:\n\n```\npnpm dlx shadcn@latest migrate radix src/components/custom\n```\n\nOnce complete, you can remove any unused `@radix-ui/react-*` packages from your `package.json`.\n\nSee the [migrate radix documentation](https://ui.shadcn.com/docs/changelog/2026-02-radix-ui/docs/cli#migrate-radix) for more details.","publishedAt":"2026-02-02T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-02-radix-ui","media":[]},{"id":"rel_Dh4o8YIJR9pS-yKHK1hkQ","version":null,"title":"January 2026 - RTL Support","summary":"# January 2026 - RTL Support\n\nThe shadcn CLI now supports RTL (right-to-left) layouts by automatically converting physical CSS classes to logical equi...","content":"# January 2026 - RTL Support\n\nThe shadcn CLI now supports RTL (right-to-left) layouts by automatically converting physical CSS classes to logical equivalents.\n\nshadcn/ui now has first-class support for right-to-left (RTL) layouts. Your components automatically adapt for languages like Arabic, Hebrew, and Persian.\n\n**This works with the shadcn/ui components as well as any component distributed on the shadcn registry.**\n\n## Our approach to RTL\n\nTraditionally, component libraries that support RTL ship with logical classes baked in. This means everyone has to work with classes like `ms-4` and `start-2`, even if they're only building for LTR layouts.\n\nWe took a different approach. The shadcn CLI transforms classes at install time, so you only see logical classes when you actually need them. If you're not building for RTL, you work with familiar classes like `ml-4` and `left-2`. When you enable RTL, the CLI handles the conversion for you.\n\n**You don't have to learn RTL until you need it.**\n\n## How it works\n\nWhen you add components with `rtl: true` set in your `components.json`, the CLI automatically converts physical CSS classes like `ml-4` and `text-left` to their logical equivalents like `ms-4` and `text-start`.\n\n* Physical positioning classes like `left-*` and `right-*` become `start-*` and `end-*`.\n* Margin and padding classes like `ml-*` and `pr-*` become `ms-*` and `pe-*`.\n* Text alignment classes like `text-left` become `text-start`.\n* Directional props are updated to use logical values.\n* Supported icons are automatically flipped using `rtl:rotate-180`.\n* Animations like `slide-in-from-left` become `slide-in-from-start`.\n\n## RTL examples for every component\n\nWe've added RTL examples for every component. You'll find live previews and code on each component page.\n\n## CLI updates\n\n**New projects**: Use the `--rtl` flag with `init` or `create` to enable RTL from the start.\n\n```\npnpm dlx shadcn@latest init --rtl\n```\n\n```\npnpm dlx shadcn@latest create --rtl\n```\n\n**Existing projects**: Migrate your components with the `migrate rtl` command.\n\n```\npnpm dlx shadcn@latest migrate rtl\n```\n\nThis transforms all components in your `ui` directory to use logical classes. You can also pass a specific path or glob pattern.\n\n## Try it out\n\nClick the link below to open a Next.js project with RTL support in v0.\n\n[![Open in v0](https://v0.app/chat-static/button.svg)](https://v0.app/chat/api/open?url=https://github.com/shadcn-ui/next-template-rtl)\n\n## Links\n\n* [RTL Documentation](https://ui.shadcn.com/docs/rtl)\n* [Font Recommendations](https://ui.shadcn.com/docs/rtl#font-recommendations)\n* [Animations](https://ui.shadcn.com/docs/rtl#animations)\n* [Migrating Existing Components](https://ui.shadcn.com/docs/rtl#migrating-existing-components)\n* [Next.js Setup](https://ui.shadcn.com/docs/rtl/next)\n* [Vite Setup](https://ui.shadcn.com/docs/rtl/vite)\n* [TanStack Start Setup](https://ui.shadcn.com/docs/rtl/start)","publishedAt":"2026-01-28T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-01-rtl","media":[]},{"id":"rel_pCp29j1c-DlDM38wsqcYa","version":null,"title":"January 2026 - Inline Start and End Styles","summary":"# January 2026 - Inline Start and End Styles\n\nWe've updated the styles for Base UI components to support `inline-start` and `inline-end` side values. ...","content":"# January 2026 - Inline Start and End Styles\n\nWe've updated the styles for Base UI components to support `inline-start` and `inline-end` side values. The following components now support these values:\n\n* Tooltip\n* Popover\n* Combobox\n* Context Menu\n* Dropdown Menu\n* Hover Card\n* Menubar\n* Select\n\n## What Changed\n\nWe added new Tailwind classes to handle the logical side values:\n\n```\n\n```\n\n## Usage\n\n```\n\n Open\n \n {/* Opens on the left in LTR, right in RTL */}\n \n\n```\n\n## LLM Prompt\n\nAsk your LLM to update your components by running the following prompt:\n\n```\nAdd inline-start and inline-end support to my shadcn/ui components. Add the following Tailwind classes to each component:\n\n| File | Component | Add Classes |\n|------|-----------|-------------|\n| tooltip.tsx | TooltipContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n| tooltip.tsx | TooltipArrow | `data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2` |\n| popover.tsx | PopoverContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n| hover-card.tsx | HoverCardContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n| select.tsx | SelectContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 data-[align-trigger=true]:animate-none` and add `data-align-trigger={alignItemWithTrigger}` attribute |\n| combobox.tsx | ComboboxContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n| dropdown-menu.tsx | DropdownMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n| context-menu.tsx | ContextMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n| menubar.tsx | MenubarContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |\n\nAdd these classes next to the existing `data-[side=top]`, `data-[side=bottom]`, `data-[side=left]`, `data-[side=right]` classes.\n```","publishedAt":"2026-01-23T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-01-inline-side-styles","media":[]},{"id":"rel_6UdmiI1jBLWBuq2Es2zjZ","version":null,"title":"January 2026 - Base UI Documentation","summary":"# January 2026 - Base UI Documentation\n\nFull documentation for Base UI components.\n\nWe've shipped full documentation for Base UI components.\n\nWhen we ...","content":"# January 2026 - Base UI Documentation\n\nFull documentation for Base UI components.\n\nWe've shipped full documentation for Base UI components.\n\nWhen we launched `npx shadcn create` in December, we introduced the ability to choose between Radix and Base UI as your component library. Today, we're following up with complete documentation for all Base UI components.\n\n## What's New\n\n* **Full Base UI docs** - Every component now has dedicated documentation for Base UI, covering usage, props, and examples.\n* **Rebuilt examples** - All component examples have been rebuilt for both Radix and Base UI. Switch between them to see the implementation differences.\n* **Side-by-side comparison** - The docs make it easy to compare how components work across both libraries.\n\n## Same Abstraction, Different Primitives\n\nThe goal remains the same: give you a consistent API regardless of which primitive library you choose. The components look and behave the same way. Only the underlying implementation changes.\n\n```\n// Works the same whether you're using Radix or Base UI.\nimport { Dialog, DialogContent, DialogTrigger } from \"@/components/ui/dialog\"\n```\n\nIf you're starting a new project, run `npx shadcn create` and pick your preferred library. The CLI handles the rest.","publishedAt":"2026-01-20T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2026-01-base-ui","media":[]},{"id":"rel_GIPYiFS2HOMjsnqNjJQM3","version":null,"title":"December 2025 - npx shadcn create","summary":"# December 2025 - npx shadcn create\n\nCustomize everything. Pick your component library, icons, base color, theme, fonts and create your own version of...","content":"# December 2025 - npx shadcn create\n\nCustomize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.\n\nFrom the very first commit, the goal of shadcn/ui was to make it customizable. The idea is to give you solid defaults, spacing, color tokens, animations, accessibility, and then let you take it from there. Tweak the code. Add new components. Change the colors. Build your own version.\n\nBut somewhere along the way, all apps started looking the same. I guess the defaults were a little _too_ good. My bad.\n\nToday, we're changing that: **npx shadcn create**.\n\n## 5 New Visual Styles\n\nWe're starting with **5 new visual styles**, designed to help your UI actually feel like _your_ UI.\n\n* **Vega** – The classic shadcn/ui look.\n* **Nova** – Reduced padding and margins for compact layouts.\n* **Maia** – Soft and rounded, with generous spacing.\n* **Lyra** – Boxy and sharp. Pairs well with mono fonts.\n* **Mira** – Compact. Made for dense interfaces.\n\n## Beyond Theming\n\nYour config doesn't just change colors, it rewrites the component code to match your setup. Fonts, spacing, structure, even the libraries you use, everything adapts to your preferences.\n\nThe new CLI takes care of it all.\n\n## Component Library Options\n\nStart with a component library. Choose between **Radix** or **Base UI**.\n\nWe rebuilt every component for Base UI, keeping the same abstraction. They are fully compatible with your existing components, even those pulled from remote registries.\n\nWhen you pull down components, we auto-detect your library and apply the right transformations.\n\n## Supported Frameworks\n\nNow available for Next.js, Vite, TanStack Start and v0.\n\n[Get Started](https://ui.shadcn.com/docs/changelog/2025-12-shadcn-create/create)","publishedAt":"2025-12-12T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-12-shadcn-create","media":[]},{"id":"rel_sYRRshsWY85PI-EnAQDIW","version":null,"title":"October 2025 - Registry Directory","summary":"# October 2025 - Registry Directory\n\nA list of code registries you can browse and pull code and components from.\n\nWe just published the Registry Direc...","content":"# October 2025 - Registry Directory\n\nA list of code registries you can browse and pull code and components from.\n\nWe just published the Registry Directory: a list of code registries you can browse and pull code and components from.\n\n\n\nBuilt into the CLI. No config required.","publishedAt":"2025-10-28T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-10-registry-directory","media":[]},{"id":"rel_F6qZaSvSsqfs1PrAGeJST","version":null,"title":"October 2025 - New Components","summary":"# October 2025 - New Components\n\nSpinner, Kbd, Button Group, Input Group, Field, Item, and Empty components.\n\nFor this round of components, I looked a...","content":"# October 2025 - New Components\n\nSpinner, Kbd, Button Group, Input Group, Field, Item, and Empty components.\n\nFor this round of components, I looked at what we build every day, the boring stuff we rebuild over and over, and made reusable abstractions you can actually use.\n\n**These components work with every component library, Radix, Base UI, React Aria, you name it. Copy and paste to your projects.**\n\n* [Spinner](#spinner): An indicator to show a loading state.\n* [Kbd](#kbd): Display a keyboard key or group of keys.\n* [Button Group](#button-group): A group of buttons for actions and split buttons.\n* [Input Group](#input-group): Input with icons, buttons, labels and more.\n* [Field](#field): One component. All your forms.\n* [Item](#item): Display lists of items, cards, and more.\n* [Empty](#empty): Use this one for empty states.\n\n## Spinner\n\nAn indicator to show a loading state. Can be used standalone or in buttons.\n\n```\nimport { Spinner } from \"@/components/ui/spinner\"\n\n\n```\n\nYou can edit the code and replace it with your own spinner.\n\n## Kbd\n\nKbd is a component that renders a keyboard key.\n\n```\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\"\n\nCtrl\n```\n\nUse `KbdGroup` to group keyboard keys together.\n\n```\n\n Ctrl\n B\n\n```\n\nYou can add it to buttons, tooltips, input groups, and more.\n\n## Button Group\n\nA container that groups related buttons together with consistent styling. Great for action groups, split buttons, and more.\n\n```\nimport { ButtonGroup } from \"@/components/ui/button-group\"\n\n\n \n \n\n```\n\nYou can nest button groups to create more complex layouts with spacing.\n\n```\n\n \n \n \n \n \n \n \n \n\n```\n\nUse `ButtonGroupSeparator` to create split buttons. Classic dropdown pattern.\n\nYou can also use it to add prefix or suffix buttons and text to inputs.\n\n```\n\n Prefix\n \n \n\n```\n\n## Input Group\n\nInput Group lets you add icons, buttons, and more to your inputs.\n\n```\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupInput,\n} from \"@/components/ui/input-group\"\n\n\n \n \n \n \n\n```\n\nYou can add buttons to the input group, text, labels, tooltips, and more. It also works with textareas for really complex components.\n\n## Field\n\nA component for building really complex forms. Works with all your form libraries: Server Actions, React Hook Form, TanStack Form, Bring Your Own Form.\n\n```\nimport {\n Field,\n FieldDescription,\n FieldError,\n FieldLabel,\n} from \"@/components/ui/field\"\n\n\n Username\n \n \n Choose a unique username for your account.\n \n\n```\n\nIt works with all form controls: Inputs, textareas, selects, checkboxes, radios, switches, sliders, and more.\n\nYou can group fields together using `FieldGroup` and `FieldSet`. Perfect for multi-section forms.\n\n```\n
\n \n \n \n \n \n
\n```\n\nMaking it responsive is easy. Use `orientation=\"responsive\"` and it switches between vertical and horizontal layouts based on container width.\n\nWrap your fields in `FieldLabel` to create a selectable field group.\n\n## Item\n\nA straightforward flex container that can house nearly any type of content. Use it to display lists of items, cards, and more.\n\n```\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/components/ui/item\"\n\n\n \n \n \n \n Dashboard\n Overview of your account and activity.\n \n\n```\n\nYou can add icons, avatars, or images to the item. Use `ItemGroup` to display a list of items.\n\nUse the `asChild` prop to render it as a link.\n\n## Empty\n\nUse this to display empty states in your app.\n\n```\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyMedia,\n EmptyTitle,\n} from \"@/components/ui/empty\"\n\n\n \n \n \n No messages\n You don't have any messages yet.\n \n \n \n\n```\n\nYou can use it with avatars, input groups for things like search results or email subscriptions, and more.","publishedAt":"2025-10-03T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-10-new-components","media":[]},{"id":"rel_4hNupV2bEkjsOInyA8wYb","version":null,"title":"September 2025 - Registry Index","summary":"# September 2025 - Registry Index\n\nAn index of open source registries that you can install items from.\n\nWe've created an index of open source registri...","content":"# September 2025 - Registry Index\n\nAn index of open source registries that you can install items from.\n\nWe've created an index of open source registries that you can install items from.\n\nYou can search, view and add items from the registry index without configuring the `components.json` file.\n\nThey'll be automatically added to your `components.json` file for you.\n\n```\npnpm dlx shadcn add @ai-elements/prompt-input\n```\n\nThe full list of registries is available at .\n\nTo add a registry to the index, submit a PR to the `shadcn/ui` repository. See the [registry index documentation](https://ui.shadcn.com/docs/changelog/2025-09-registry-index/docs/registry/registry-index) for more details.","publishedAt":"2025-09-02T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-09-registry-index","media":[]},{"id":"rel_kaL_5EPA_XD2CPocN5iB4","version":"3.0","title":"August 2025 - shadcn CLI 3.0 and MCP Server","summary":"Namespaced registries, advanced authentication, new commands and a completely rewritten registry engine.","content":"Namespaced registries, advanced authentication, new commands and a completely rewritten registry engine.","publishedAt":"2025-08-27T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-08-cli-3-mcp","media":[]},{"id":"rel_Mp48XN9uYb-RBsQ_NMhGz","version":null,"title":"July 2025 - Universal Registry Items","summary":"Create registry items that can be distributed to any project.","content":"Create registry items that can be distributed to any project.","publishedAt":"2025-07-11T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-07-universal-registry","media":[]},{"id":"rel_zydn16PWwZ8BdA_72kLWa","version":null,"title":"July 2025 - Local File Support","summary":"Initialize projects and add components from local JSON files.","content":"Initialize projects and add components from local JSON files.","publishedAt":"2025-07-07T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-07-local-file-support","media":[]},{"id":"rel_N7LaJTaXR30BIPFYH86KQ","version":null,"title":"June 2025 - radix-ui Migration","summary":"A new command to migrate to the new radix-ui package.","content":"A new command to migrate to the new radix-ui package.","publishedAt":"2025-06-11T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-06-radix-ui","media":[]},{"id":"rel_bgIKTJWskVS2XJuru-QzL","version":null,"title":"June 2025 - Calendar Component","summary":"Upgraded Calendar component with React DayPicker and 30+ calendar blocks.","content":"Upgraded Calendar component with React DayPicker and 30+ calendar blocks.","publishedAt":"2025-06-06T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-06-calendar","media":[]},{"id":"rel_xikRX5l0gMuQx4wxx94l9","version":null,"title":"May 2025 - New Site","summary":"Upgraded ui.shadcn.com to Next.js 15.3 and Tailwind v4.","content":"Upgraded ui.shadcn.com to Next.js 15.3 and Tailwind v4.","publishedAt":"2025-05-30T00:00:00.000Z","url":"https://ui.shadcn.com/docs/changelog/2025-05-new-site","media":[]}],"pagination":{"page":1,"pageSize":20,"totalPages":2,"totalItems":37},"summaries":{"rolling":{"windowDays":90,"summary":"shadcn/ui shifted toward platform flexibility and international readiness over the past three months. The CLI evolved significantly with v4, adding skills, presets, and dry-run modes to make it work better with coding agents and monorepos. The component library expanded its foundation support—all blocks shipped for both Radix and Base UI, the new-york style migrated to the unified radix-ui package, and RTL support landed with automatic logical CSS conversion. Documentation for Base UI components also completed, removing a gap for teams choosing that foundation.","releaseCount":6,"generatedAt":"2026-04-01T21:35:40.654Z"},"monthly":[{"year":2026,"month":3,"summary":"The CLI entered its fourth major version with a focus on agent-friendly workflows and developer flexibility. Added skills system for composable component generation, dry-run mode to preview changes before applying them, and preset support to save and share custom configurations. Expanded monorepo handling and introduced new templates alongside the core template updates.","releaseCount":1,"generatedAt":"2026-04-01T21:35:42.402Z"}]}}