Frontend · Comparison
Tailwind CSS vs Radix UI vs shadcn/ui
These three are often named together because they stack: Tailwind provides the styling, Radix provides accessible behaviour, and shadcn/ui combines styling with accessible primitives (Radix or Base UI) into components you own.
3 options · 7 questions side by side · updated
| Compare | Tailwind CSS | Radix UI | shadcn/ui |
|---|---|---|---|
| What it is | Utility CSS classes | Unstyled, accessible components | Copy-in components built on both ideas |
| Handles | Looks: spacing, colour, layout | Behaviour: focus, keyboard, ARIA | Both, as ready-made components |
| How you get it | An npm package and build plugin | npm packages | A CLI copies source into your project |
| Styling | It is the styling | None; bring your own | Tailwind classes you can edit |
| Frameworks | Any | React only | React (community ports exist) |
| Updates | Upgrade the package | Upgrade the package | Pull changes in by hand |
| Cost | Free (MIT) | Free (MIT) | Free (MIT) |
How to choose between Tailwind CSS, Radix UI and shadcn/ui
- Pick Tailwind CSS on its own when you want custom designs and are happy to build components yourself.
- Pick Radix UI when building a design system that needs solid accessibility under your own styles.
- Pick shadcn/ui for React apps that want good-looking, accessible components quickly, with full control of the code.
The options
- Tailwind CSSA CSS framework where you style elements with small ready-made classes, such as p-4 or text-center, right in the HTML instead of writing separate stylesheets.
- Radix UIA set of unstyled, accessible React building blocks, such as dialogs, menus, tabs and tooltips, that handle behaviour and keyboard support while you supply the look.
- shadcn/uiA widely used collection of ready-made React components (buttons, dialogs, forms, tables) that you copy into your own project and then own and edit, rather than install as a package.
More comparisons
- React vs Vue vs Angular vs SvelteThe four main ways to build interactive web interfaces. Each can build almost anything; they differ in how much they include, how they update the page and how large their communities are.
- Next.js vs Vite vs Astro vs Create React AppFour ways to start a React-based website or app. They are not quite the same kind of tool: Next.js and Astro are frameworks, Vite is a build tool, and Create React App is a retired starter.
- Zustand vs Redux vs TanStack QueryZustand and Redux manage state that lives in the browser; TanStack Query manages data that lives on a server. Many apps use one of the first two alongside the third.
- Framer Motion vs GSAPTwo widely used JavaScript animation libraries. Motion (formerly Framer Motion) fits naturally into React components; GSAP is built for long, precisely timed sequences on any stack.
- CSR vs SSR vs SSG vs ISRFour answers to one question: when is a page's HTML built? In the browser, on the server for each request, once at build time, or at build time with refreshes in the background.
- Single-page app vs multi-page appDoes the browser load one page and swap its contents, or load a new page for every link? The choice affects speed, SEO and how much the app has to handle itself.
Crafted in the dark. Shipped to the world.
Tell us what you are building. You get a private project space with a proposal and a line-by-line quote within a day.