Shadcn/UI now defaults to Base UI instead of Radix
📢 shadcn/ui Update: Transitioning to Base UI as the Default
🚀 July 2026: The Shift to Base UI
As of today, Base UI has officially become the default component library powering shadcn/ui.
The Evolution
When shadcn/ui first debuted in January 2023, it relied heavily on Radix. Radix provided the essential foundation:
- Unstyled headless components
- Robust APIs
- Industry-leading accessibility
- Proven stability across millions of applications
However, the creators of Radix have since developed a successor: Base UI. This new library represents a "second pass," incorporating every lesson learned from the original Radix implementation.
The Strategy: Choice Over Coercion
When Base UI entered beta last year, the community wondered if Radix would be scrapped. The response was clear: switching component libraries in a production environment is the worst possible move.
Instead of forcing a migration, the shadcn philosophy was applied: rebuild everything for Base UI while maintaining the same abstraction layer, allowing developers to choose their path.
Current Adoption & Support
| Metric/Status | Detail |
|---|---|
| Adoption Rate | New projects via shadcn/create choose Base UI over Radix at a 2:1 ratio. |
| Compatibility | Radix remains fully supported. |
| Future Updates | New components and updates will ship for both (unless a feature is exclusive to Base UI). |
| Internal Use | The shadcn team still uses Radix in production and is not migrating. |
How to Stay on Radix
If you prefer Radix, it is only a single flag away during initialization:
# Use the -b flag to specify the library
pnpm dlx shadcn init -b radix
Pro Tip: If you utilize non-interactive CI scripts or automated workflows that expect Radix, ensure you append
-b radixto maintain consistency. Alternatively, you can pin your library using aregistry:baseconfiguration.
🛠️ When You're Ready to Migrate
Migration is optional. However, for those who wish to move to Base UI, a specialized "skill" has been developed to make the process seamless.
The Migration Workflow
Instead of a rigid codemod—which often fails when it encounters custom variants, modified classes, or unique props—shadcn is providing knowledge.
- Install the migration skill:
pnpm dlx skills add shadcn/ui - Direct your AI agent:
migrate accordion to base-ui
Why this approach?
A standard codemod is mechanical; it breaks when you've customized your code. This agent-based approach uses a comprehensive map of every rename, prop change, and behavioral shift.
Example of a mechanical change:
asChild render
Migration Output & Reporting
Each migration run produces three distinct results:
- Functional Code: Updated components that work immediately.
- Progress Tracking: Changes are saved in git history, allowing you to stop and resume across different sessions.
- Detailed Reports: A
.migration/directory is created at the root.
Example Report Structure (.migration/accordion.md):
- Header: Date, strategy employed, and a final verdict.
- Changed: A list of every modified file and the reasoning behind the change.
- Left Alone: Files that were identified as related but intentionally ignored.
- Behavior Changes: Logic that compiles but may act differently (flagged for review).
- Manual Verification: A checklist (e.g., Check keyboard tabbing, Verify open/close state).
Performance Metrics
The system was tested on real-world projects containing 60+ components (36 of which were Radix).
This works across Claude Code, Cursor, and any agent supporting skills.
💬 June 2026: New Components for Chat Interfaces
Building chat UIs is notoriously difficult, particularly regarding scroll behavior during AI streaming. To solve this, shadcn/ui is introducing a suite of dedicated primitives.
The New Toolkit
We have reimagined the abstraction of conversation layers to provide components you can copy and adapt:
MessageScroller: The core container.Message: The row wrapper.Bubble: The visual message container.Attachment: For file/image handling.Marker: For status or timing indicators.
Deep Dive: MessageScroller
The MessageScroller is designed to handle the "hard parts" of chat UX without dictating your state management or AI transport layer.
Key Capabilities:
- Anchored turns (preventing jumps)
- Streaming reply handling
- Thread restoration
- Prepended history loading
- Jump-to-message functionality
- Visibility tracking and scroll controls
Installation:
pnpm dlx shadcn@latest add message-scroller message bubble attachment marker
Note: For those needing a purely headless version,
MessageScrolleris also available via@shadcn/react.