Base UI & Radix UI Support Across Shadcn Studio Blocks & Components
We’re excited to announce one of the biggest updates to the Shadcn Studio ecosystem yet. Shadcn Components, Shadcn Blocks, and the Shadcn Theme Generator now fully support both Base UI and Radix UI implementations, giving developers greater flexibility when building modern React applications.
With this update, you can generate, customize, and ship production-ready components and blocks using the UI foundation that best fits your project requirements. Alongside this, we’ve added 25+ new components, and upgraded the Theme Generator to ensure seamless compatibility with shadcn/ui v4. For further details check the guide for Shadcn CLI 4
Whether you’re building design systems, dashboards, landing pages, or SaaS products, this update makes it easier than ever to create consistent, accessible, and scalable user interfaces across your entire workflow.
Production Ready Components For Real Applications
Every component is fully customizable, built for modern frontend workflows, and available in both Base UI and Radix UI implementations.
Whether you’re building simple interfaces or large-scale applications, these components help you move faster while maintaining a clean, consistent, and scalable UI.
This update expands the ecosystem with a larger collection of reusable building blocks covering navigation, onboarding, content layouts, productivity workflows, and responsive dashboard patterns.
Before exploring the full list, check out the showcase video below for a quick look at the new components, interactions, and UI patterns included in this release.
Shadcn Carousel 12
Create smooth and responsive carousels for showcasing images, products, testimonials, announcements, featured content, and interactive UI sections. Carousels are widely used in landing pages and marketing sites to present large amounts of content in a visually engaging way without overwhelming the layout.
These components are designed to work across desktop and mobile experiences with touch-friendly interactions and responsive behavior built in.
Ideal For:
- Landing pages
- Product showcases
- Testimonials
- Image galleries
- Featured sections
Why Use It: Carousels help organize content into interactive layouts that improve engagement while keeping interfaces clean and modern. They are especially useful for highlighting featured content, promotions, or user-generated reviews.
Key Features:
- Swipe & touch support
- Auto-play sliders
- Navigation arrows & pagination
- Responsive layouts
- Base UI & Radix UI support
Shadcn Drawer 15
Add modern slide-in panels for menus, filters, settings, shopping carts, notifications, and mobile navigation workflows. Drawers are commonly used in modern applications to create off-canvas experiences that feel smooth, responsive, and less intrusive compared to traditional modal layouts.
They are especially useful for keeping users focused on the current page while still allowing quick access to secondary content, actions, or settings panels.
Ideal For:
- Mobile navigation
- Settings panels
- Shopping carts
- Dashboard sidebars
- Filters
Why Use It: Drawers help improve usability on both desktop and mobile interfaces by saving screen space while keeping important actions easily accessible. They also create more fluid UX patterns for dashboards, SaaS products, ecommerce platforms, and admin interfaces.
Key Features:
- Slide-in drawer layouts
- Smooth animations
- Responsive off-canvas panels
- Mobile-friendly interactions
- Base UI & Radix UI support
Shadcn Navigation Menu 09
Build modern navigation systems for websites, SaaS products, dashboards, and documentation platforms. Navigation menus are one of the most important parts of application UX because they directly affect discoverability, usability, and content organization.
These components help create structured and scalable navigation experiences for both simple websites and complex applications.
Ideal For:
- SaaS dashboards
- Admin panels
- Documentation sites
- Ecommerce navigation
- Multi-level menus
Why Use It: Well-designed navigation systems help users move through applications more efficiently while improving the overall structure and clarity of interfaces.
Key Features:
- Dropdown & mega menus
- Multi-level navigation
- Keyboard accessibility
- Responsive layouts
- Base UI & Radix UI support
Shadcn Skeleton 12
Show elegant loading placeholders while content is loading or being fetched asynchronously. Skeleton loaders are commonly used in modern interfaces to improve perceived performance and create smoother transitions between loading and loaded states.
Instead of showing empty layouts or generic spinners, skeletons give users a visual preview of the content structure before the final data appears.
Ideal For:
- Loading screens
- Dashboard states
- Tables & cards
- Async rendering
- Content-heavy layouts
Why Use It: Skeletons create smoother UX experiences while reducing visual layout shifts during loading workflows.
Key Features:
- Animated placeholders
- Card & table skeletons
- Lightweight rendering
- Responsive loading states
- Base UI & Radix UI support
Shadcn Separator14
Add clean and minimal visual dividers to organize layouts, separate sections, and improve content hierarchy across interfaces. Separators are small UI elements, but they play a major role in improving readability and structure inside modern applications.
These components help create cleaner interfaces by visually grouping related content while reducing clutter in complex layouts.
Ideal For:
- Menus
- Settings pages
- Dashboards
- Documentation layouts
- Content grouping
Why Use It:
Separators improve visual hierarchy and make interfaces easier to scan and navigate.
Key Features:
- Horizontal & vertical dividers
- Minimal styling
- Responsive layouts
- Accessible structure
- Base UI & Radix UI support
Shadcn Spinner 10
Display lightweight loading indicators for async actions, forms, pages, buttons, and data fetching states. Spinners are one of the most commonly used feedback components in frontend interfaces because they instantly communicate that an action is processing.
These components are designed to integrate cleanly into both small UI interactions and full-page loading workflows.
Ideal For:
- Loading buttons
- Page loaders
- Form submissions
- Async actions
- Processing states
Why Use It: Spinners improve user feedback and make interfaces feel more responsive during background operations.
Key Features:
- Animated indicators
- Smooth transitions
- Accessible loading states
- Lightweight rendering
- Base UI & Radix UI support
Shadcn Slider 19
Create interactive sliders for selecting values such as ranges, pricing filters, audio controls, percentages, and adjustable settings. Sliders are commonly used in dashboards and applications where visual interaction improves usability compared to manual input fields.
These components are designed for responsive interactions across both desktop and mobile devices.
Ideal For:
- Pricing filters
- Range selectors
- Settings panels
- Volume controls
- Interactive dashboards
Why Use It: Sliders provide a more intuitive and interactive way to adjust values in modern interfaces.
Key Features:
- Single & range sliders
- Touch interactions
- Keyboard accessibility
- Custom track styling
- Base UI & Radix UI support
Shadcn Label 09
Add accessible and semantically correct labels for form fields, checkboxes, inputs, and interactive controls. Labels are essential for usability and accessibility because they help users understand form structure and improve screen reader support.
These components are designed to integrate cleanly into modern form systems and validation workflows.
Ideal For:
- Forms
- Checkboxes
- Authentication pages
- Settings screens
- User inputs
Why Use It: Labels improve accessibility, usability, and overall form clarity across applications.
Key Features:
- Accessible form labeling
- Semantic structure
- Error state integration
- Input support
- Base UI & Radix UI support
Shadcn Scroll Area 06
Create custom scrollable layouts for tables, sidebars, chats, activity feeds, and large content sections. Scroll areas help maintain cleaner layouts while allowing users to navigate long or overflowing content more efficiently.
These components are especially useful for dashboard interfaces and workspace-style applications.
Ideal For:
- Chat layouts
- Sidebars
- Tables
- Documentation panels
- Activity feeds
Why Use It: Scroll areas improve content organization while keeping layouts compact and responsive.
Key Features:
- Custom scrollbars
- Smooth scrolling
- Horizontal & vertical support
- Responsive layouts
- Base UI & Radix UI support
Shadcn Stepper 12
Build structured multi-step workflows for onboarding systems, checkout experiences, setup wizards, and guided forms. Steppers help simplify complex processes by dividing them into smaller and easier-to-follow stages.
These components improve user experience by making progress more visible and reducing confusion during longer workflows.
Ideal For:
- Onboarding flows
- Multi-step forms
- Setup wizards
- Checkout systems
- Guided workflows
Why Use It: Steppers create more organized and user-friendly workflows while improving completion rates.
Key Features:
- Progress tracking
- Horizontal & vertical layouts
- Multi-step workflows
- Responsive navigation
- Base UI & Radix UI support
Shadcn Toggle 14
Add modern on/off controls for filters, feature flags, preferences, and interactive settings. Toggles are commonly used in dashboards and settings pages where users need fast and intuitive state switching interactions.
These components help create cleaner interfaces with simplified interaction patterns.
Ideal For:
- Feature flags
- Settings pages
- Filters
- Quick actions
- Preference controls
Why Use It: Toggles provide fast and intuitive interaction patterns for changing states inside applications.
Key Features:
- Toggle state management
- Animated transitions
- Keyboard accessibility
- Responsive controls
- Base UI & Radix UI support
Shadcn Command 14
Build powerful command palettes, search menus, quick launchers, and keyboard-driven workflows inspired by modern productivity tools. Command interfaces have become a core UX pattern in applications focused on speed, accessibility, and power-user experiences.
These components make it easier to build searchable interfaces that help users navigate large applications, trigger actions quickly, and improve workflow efficiency.
Ideal For:
- Productivity apps
- Internal tools
- Dashboard search
- Keyboard-first workflows
- Power-user experiences
Why Use It: Command menus significantly improve navigation speed and overall productivity inside complex applications. They also create more polished and professional user experiences commonly found in modern SaaS platforms.
Key Features:
- Search & filtering
- Keyboard shortcuts
- Command palette layouts
- Productivity workflows
- Base UI & Radix UI support
Shadcn Progress Bar 23
Display visual progress indicators for uploads, onboarding flows, loading states, task completion, and multi-step workflows. Progress indicators are essential for improving user feedback and helping users understand the current state of ongoing actions.
These components are designed to create smoother user experiences by making workflows feel more transparent and interactive.
Ideal For:
- Upload systems
- Task tracking
- Form completion
- Onboarding flows
- Loading states
Why Use It: Progress bars improve workflow visibility and reduce uncertainty during longer-running interactions and processes.
Key Features:
- Animated transitions
- Determinate & loading states
- Progress indicators
- Responsive layouts
- Base UI & Radix UI support
Shadcn Autocomplete 10
Help users search and select options faster with dynamic suggestions and intelligent filtering interactions. Autocomplete inputs are commonly used in modern applications to improve form usability and reduce manual typing effort.
These components are ideal for handling large datasets and searchable interfaces.
Ideal For:
- Search inputs
- Country selectors
- Product search
- Large datasets
- Dynamic filtering
Why Use It: Autocomplete improves usability while making forms and search workflows feel faster and more interactive.
Key Features:
- Dynamic suggestions
- Keyboard navigation
- Async search support
- Search filtering
- Base UI & Radix UI support
Shadcn List 10
Display structured content such as activity feeds, notifications, tasks, records, and grouped interface elements. Lists are widely used across dashboards and productivity tools because they help organize repetitive content into readable layouts.
These components help maintain consistency across large content-heavy applications.
Ideal For:
- Activity feeds
- Notifications
- Task lists
- Records
- Sidebar content
Why Use It: Lists improve content organization and scalability for interfaces containing repeated data structures.
Key Features:
- Structured layouts
- Interactive list items
- Responsive spacing
- Activity feed support
- Base UI & Radix UI support
Shadcn Rating 08
Add interactive rating systems for products, reviews, customer feedback, and user satisfaction workflows. Rating interfaces are commonly used in ecommerce platforms, review systems, and feedback-driven applications.
These components help create more engaging and user-friendly feedback experiences.
Ideal For:
- Product reviews
- User feedback
- Service ratings
- Ecommerce apps
- Review workflows
Why Use It: Ratings simplify feedback collection while improving engagement and interaction quality.
Key Features:
- Interactive star ratings
- Hover & active states
- Responsive layouts
- Review workflows
- Base UI & Radix UI support
Shadcn Typography 15
Create consistent typography systems for blogs, documentation, dashboards, content pages, and marketing websites. Typography plays a major role in readability, content hierarchy, and overall interface polish.
These typography components help maintain visual consistency across large applications and content-heavy platforms while improving the reading experience for users.
Ideal For:
- Blogs
- Documentation
- Marketing pages
- Content layouts
- Articles
Why Use It: Typography systems help create cleaner interfaces with more consistent spacing, hierarchy, and readability across applications.
Key Features:
- Responsive typography styles
- Semantic HTML structure
- Readability optimization
- Blog layouts
- Base UI & Radix UI support
Shadcn Toggle Group 16
Create grouped toggle interactions for segmented controls, filters, alignment options, and view switching systems. Toggle groups are commonly used in dashboards and editor-style interfaces where users need to switch between related options quickly.
These components help simplify grouped interactions inside toolbars and control panels.
Ideal For:
- Toolbars
- View switchers
- Filters
- Alignment controls
- Mode selectors
Why Use It: Toggle groups improve organization and simplify grouped state interactions inside modern interfaces.
Key Features:
- Segmented controls
- Single & multi-select support
- Active state indicators
- Keyboard accessibility
- Base UI & Radix UI support
Shadcn Phone Input 09
Add advanced phone number inputs with country selection, formatting support, and validation workflows. Phone inputs are essential for international applications and user onboarding systems where accurate data collection matters.
These components help improve both usability and data consistency inside forms.
Ideal For:
- Signup forms
- Contact forms
- International apps
- Verification workflows
- User onboarding
Why Use It: Phone inputs improve international usability while reducing formatting and validation issues.
Key Features:
- Country selector support
- International formatting
- Validation workflows
- Responsive layouts
- Base UI & Radix UI support
Shadcn Code Block 07
Display technical code snippets, commands, examples, and developer-focused content using clean and readable layouts. Code blocks are essential for documentation sites, tutorials, API references, and developer tooling platforms.
These components help improve readability and developer experience across technical content.
Ideal For:
- Documentation
- Developer blogs
- API references
- Tutorials
- Technical content
Why Use It: Code blocks improve readability and usability for technical interfaces and educational content.
Key Features:
- Syntax highlighting
- Copy-to-clipboard support
- Multi-language code blocks
- Responsive layouts
- Base UI & Radix UI support
Shadcn Resizable 09
Build advanced layouts with adjustable and resizable panels for dashboards, editors, productivity tools, and workspace-style applications. Resizable interfaces are commonly used in modern tools where users need more control over layout organization and workspace flexibility.
These components help create more dynamic application layouts inspired by IDEs, admin tools, and professional software interfaces.
Ideal For:
- IDE layouts
- Admin dashboards
- Workspace apps
- Editors
- Productivity tools
Why Use It: Resizable layouts improve workspace usability by allowing users to customize panel sizes based on their workflow preferences.
Key Features:
- Drag resize handles
- Workspace-style layouts
- Responsive resizing
- Flexible panels
- Base UI & Radix UI support
Shadcn Context Menu 09
Add right-click menus and contextual actions for advanced workflows inside dashboards, editors, file managers, and productivity applications. Context menus help users access important actions quickly without cluttering the main interface.
These components are especially useful for applications that require desktop-style interactions and more advanced UX patterns.
Ideal For:
- Dashboards
- Editors
- Productivity tools
- File managers
- Advanced interfaces
Why Use It: Context menus improve workflow speed while creating more polished and efficient interaction patterns.
Key Features:
- Right-click interactions
- Nested menus
- Keyboard accessibility
- Dynamic menu actions
- Base UI & Radix UI support
Shadcn KBD 08
Display keyboard shortcuts clearly across interfaces, documentation, tooltips, and command menus. KBD components help improve shortcut discoverability while creating more polished productivity-focused experiences.
These components are especially useful for applications with keyboard-first workflows.
Ideal For:
- Documentation
- Command menus
- Productivity tools
- Tooltips
- Shortcut guides
Why Use It: KBD components improve shortcut visibility and make interfaces feel more professional and accessible.
Key Features:
- Keyboard shortcut indicators
- Inline shortcut displays
- Documentation support
- Responsive typography
- Base UI & Radix UI support
Shadcn Aspect Ratio 07
Maintain consistent media sizing and responsive layouts for images, videos, cards, galleries, and embedded content. Aspect ratio components help prevent layout shifts while ensuring cleaner responsive behavior across devices.
These components are especially useful for media-heavy layouts and content-driven applications.
Ideal For:
- Images
- Videos
- Media cards
- Embedded content
- Galleries
Why Use It: Aspect ratio components improve responsive media handling while reducing layout instability.
Key Features:
- Responsive media containers
- Ratio control
- Prevent layout shifts
- Embedded content support
- Base UI & Radix UI support
Shadcn Menubar 08
Create desktop-style navigation systems for advanced interfaces, productivity apps, editors, and admin tools. Menubars are commonly used in software-focused applications where structured navigation and grouped actions are important.
These components help create interfaces inspired by modern desktop applications while maintaining responsive behavior for web-based workflows.
Ideal For:
- Productivity apps
- Editors
- Admin tools
- Dashboard interfaces
- Desktop-style layouts
Why Use It: Menubars improve organization and accessibility for applications with larger feature sets and more advanced workflows.
Key Features:
- Desktop-style navigation
- Nested dropdown menus
- Keyboard shortcut support
- Responsive layouts
- Base UI & Radix UI support
Expanding The Shadcn Component Ecosystem
This update adds a much larger set of production-ready components to the Shadcn ecosystem, making it easier to build modern interfaces without reinventing common UI patterns from scratch.
From navigation systems and onboarding flows to command palettes, workspace layouts, loading states, typography systems, and advanced interactions, these components are designed to cover a wide range of real-world frontend use cases.
Every component is open source, fully customizable, and compatible with both Base UI and Radix UI implementations, giving developers more flexibility depending on their preferred stack and architecture.
Built For Faster Frontend Development
The goal with this release was simple: help developers build better interfaces faster while maintaining clean UI systems, accessibility standards, and scalable frontend architecture.
Apart from that you can also checkout our Other Major Updates:
What We’re Building Next
With Base UI and Radix UI support now fully integrated across our components and blocks, we’re ready to focus on the next major milestone for Shadcn Studio.
We’re actively building Shadcn Dashboards , a new collection of modern dashboard templates and experiences designed for SaaS products, admin panels, analytics platforms, and internal tools.
Our goal is simple:
Deliver production-ready dashboards with the same design quality, flexibility, and developer experience that powers the rest of the Shadcn Studio ecosystem.
We’re planning to share the first release later this quarter.
To explore everything we’ve shipped so far, check out our Changelog.
And if you’d like a sneak peek at what’s currently in development, take a look at our Roadmap.
More exciting updates are on the way
Apart from that you can also checkout our Other Major Updates:
Happy Coding 🚀