Radix UI vs Chakra UI
Radix UI gives you unstyled, accessible React primitives with no visual styling at all, meant to be styled entirely by you. Chakra UI gives you styled, accessible components you customize through style props and a built-in theming system, so it looks complete right away. Choose Radix if you're building a fully custom design system from scratch; choose Chakra if you want accessible components with a default look you can adjust quickly.
Facts checked on against the official sources listed at the end. Usage numbers update daily.
Best for
Teams building a fully custom-styled design system with no default look to override
Free plan.
Best for
Projects that want accessible, styled components working right away, themed through props
Free plan.
Radix UI vs Chakra UI at a glance
| Compared on | Radix UI | Chakra UI |
|---|---|---|
| Default styling | None at all; every visual choice is written by the developer | Styled out of the box, adjustable through style props |
| Styling approach | No styling API; pair with Tailwind CSS, CSS modules or any system you choose | Style props applied directly on components, for example color, padding or width as props |
| Underlying primitives | Its own primitives, also the basis its creators later built into Base UI | Built on Ark UI since Chakra v3, a separate unstyled component library from the same team |
| Theming system | None; you build your own design tokens outside the library | Built-in theme for colors, typography and spacing, with semantic color tokens that adapt to dark mode |
| Layout primitives | Not included; Radix covers interaction patterns, not layout | Included: Box, Stack, Grid and other layout components ship as part of the library |
| Component composition | Composable primitives you assemble into your own components | Open, compound components by default since v3, designed to be composed and customized |
| Open source | Yes, MIT | Yes, MIT |
| Free plan | Yes, Radix UI is completely free | Yes, Chakra UI is completely free |
| Paid plans from | Not listed | Not listed |
| Made by | WorkOS (Radix UI open source project) | Chakra UI (open source project) |
What's the difference between Radix UI and Chakra UI?
Chakra ships a complete look, Radix ships none
Chakra UI components render with sensible default styling you can see immediately, adjustable through style props. Radix UI components render with no CSS at all, so nothing looks finished until you write the styling yourself.
Chakra v3 rebuilt on its own headless library, Ark UI, much like Radix's creators built Base UI
As of Chakra UI v3, the library combines Ark UI, a separate unstyled headless component library from the Chakra team, with a styling engine based on Panda CSS. This mirrors Radix UI's own trajectory: Radix's creators later built Base UI, a newer unstyled primitives library, meaning both styled libraries in this comparison now sit on top of a sibling unstyled project from the same team.
Chakra styles through props, Radix has no styling API
Chakra applies styles as component props, such as setting color or padding directly, compiled down at build time. Radix has no styling API of its own; developers typically reach for Tailwind CSS, CSS modules or plain CSS to style its primitives.
Chakra includes layout components, Radix doesn't
Chakra ships layout primitives like Box, Stack and Grid alongside its interactive components, useful for structuring a page without another library. Radix focuses only on interactive patterns like dialogs, menus and tooltips, and expects layout to come from elsewhere.
Radix UI vs Chakra UI pricing
Both are completely free and open source under the MIT license, with no paid tier for either.
Prices in USD from the official pricing pages on 28 September 2026. They change often, so confirm on radix-ui.com and chakra-ui.com before you commit.
Usage and activity
Chakra UI has 2.1 times as many GitHub stars as Radix UI (40.7k against 19.4k). Weekly npm downloads: 92M for @radix-ui/react-dialog and 2M for @chakra-ui/react.
| Measure | Radix UI | Chakra UI |
|---|---|---|
| GitHub stars | 19,365 | 40,676 |
| npm downloads a week | 92M (@radix-ui/react-dialog) | 2M (@chakra-ui/react) |
| Latest release | None on GitHub | @chakra-ui/codem…, 1 month ago |
| Releases in 90 days | 0 | 5 |
From the public GitHub and npm APIs, updated daily. Stars and downloads show developer interest, not product quality.
Should you choose Radix UI or Chakra UI?
Choose Radix UI if
- You're building a fully custom design system with no default visual opinions to strip out
- You already use Tailwind CSS or another styling system and want primitives to pair with it
- You want your components to be layered under a tool like shadcn/ui rather than used directly
- You need solid accessibility without a component library's own visual identity attached
Choose Chakra UI if
- You want accessible components that look complete without writing CSS first
- You prefer setting styles as props rather than maintaining separate CSS files or classes
- You want layout primitives like Box and Stack included rather than added separately
- You want built-in dark mode and semantic color tokens without configuring them yourself
Switching between Radix UI and Chakra UI
Moving from Chakra to Radix means stripping out Chakra's default styling, style-props API and layout components, then rebuilding all of it on Radix's unstyled primitives with a styling system of your choice. Moving from Radix to Chakra means giving up full styling control in exchange for Chakra's style-props approach and built-in theme, which is faster to start with but less flexible to make look distinctive without real theming work.
Radix UI vs Chakra UI: common questions
Is Radix UI better than Chakra UI?
Neither is better for every project. Radix suits teams building a fully custom design system on unstyled primitives; Chakra suits teams that want accessible, styled components working right away.
Is Chakra UI free?
Yes, completely free and open source under the MIT license, the same as Radix UI.
Does Chakra UI use Radix UI?
No. Chakra UI v3 is built on Ark UI, a separate unstyled headless component library from the Chakra team, not Radix UI.
Is Chakra UI styled or unstyled?
Styled. Components come with default visual design you adjust through style props, unlike Radix UI, which ships with no styling at all.
Does Radix UI include a theming system?
No, Radix has no built-in theming layer. Chakra UI includes a theme with semantic color tokens that adapt to dark mode.
Other options to consider
All ui libraries tools
Tailwind CSS
Utility-first CSS framework for building custom designs directly in markup, now owned by Shopify.
shadcn/ui
Copy-paste, customizable UI components built with Tailwind CSS, not installed as a package.
Material UI
React component library implementing Google's Material Design, with free core and paid MUI X components.
Ant Design
Enterprise-focused React component library and design system, maintained by Alibaba's Ant Group.
Sources
More sources for each tool are on the Radix UI and Chakra UI pages.
Related comparisons
Material UIvsRadix UI
Material UI (MUI) gives you over 40 free, pre-styled components implementing Google's Material Design, plus paid MUI X components like data grids and date pickers.
MantinevsRadix UI
Mantine is a free, open source React component library with over 100 styled, customizable components and hooks, covering forms, dates, notifications and more with default visual styling included.
Radix UIvsshadcn/ui
Radix UI is a free, open source library of unstyled, accessible React component primitives, such as dialogs, dropdowns and tooltips, that handle behavior and ARIA attributes while leaving visual styling up to the developer.
Headless UIvsRadix UI
Headless UI and Radix UI are both free, MIT-licensed libraries of unstyled, accessible interactive components that leave all visual styling to you.
Tailwind CSSvsChakra UI
Tailwind CSS is a utility-first CSS framework that styles any markup with small composable classes, and works with any framework or plain HTML.
Radix UIvsTailwind CSS
Radix UI is a library of unstyled, accessible React primitives such as dialogs, dropdowns and tooltips that handle behavior, keyboard navigation and ARIA.
NextUIvsRadix UI
NextUI was a React component library built on Tailwind CSS and React Aria, and it was rebranded to HeroUI in 2024, so new work should use HeroUI rather than the NextUI name.