HeroUI (NextUI) vs shadcn/ui: which to use?
Facts checked September 30, 2026
Both are free, open source React libraries for Tailwind CSS v4 (HeroUI under Apache 2.0, shadcn/ui under MIT), so the real difference is how the code reaches you. HeroUI is an npm package built on React Aria Components that you update with a version bump. shadcn/ui copies component source into your repo, where you own and edit it.
- Pick HeroUI if you want a maintained package with a finished look, React Aria accessibility (including date, time and color fields), or a React Native sibling in HeroUI Native.
- Pick shadcn/ui if you want every component as editable source, a choice of Radix UI or Base UI underneath, and access to the shadcn registry ecosystem.
At a glance
| Feature | HeroUI | shadcn/ui |
|---|---|---|
| Price | Free; HeroUI Pro (extra components, blocks, templates and design systems) is paid | Free |
| License | Apache 2.0 for the open source library (version 3; version 2 was MIT); HeroUI Pro is sold under its own license terms | MIT |
| Install model | npm: npm i @heroui/styles @heroui/react, then @import "@heroui/styles"; after Tailwind in your CSS | Source copied into your project with npx shadcn@latest add <name> |
| Primitives | React Aria Components from Adobe | Radix UI or Base UI; Base UI became the default in the July 2026 changelog |
| Requirements | Tailwind CSS v4 and React 19 | Tailwind CSS v4, with legacy docs for v3 |
| Styling | CSS in @heroui/styles using BEM classes, customized with Tailwind utilities and CSS variables | Tailwind utilities in your own files, with CSS variable tokens |
| Theming | OKLCH CSS variables in background and -foreground pairs; several prebuilt themes | CSS variable tokens (background, foreground, primary and so on) with theme presets |
| Dark mode | Set class="dark" or data-theme="dark" on the html element; next-themes suggested for Next.js | Yes |
| Blocks and templates | Full-page templates (dashboards, CRM, mail, chat, finance) and installable blocks in HeroUI Pro (paid) | Blocks for dashboards, sidebars, login and more, for Radix and Base UI; no official full-site templates |
| AI tooling | llms.txt, the @heroui/react-mcp MCP server and agent skills; HeroUI Pro adds its own | llms.txt and an official MCP server for browsing and installing from registries |
What each one is
HeroUI is the library previously known as NextUI. Version 3 combines React Aria Components for behavior and accessibility with Tailwind CSS v4 for styling. You install @heroui/react and @heroui/styles from npm, import the styles after Tailwind, and use components with a compound API such as Card.Header and Card.Content, with no provider wrapper required. The open source library is MIT; HeroUI Pro sells more components, blocks, full-page templates and design systems, and HeroUI Native covers React Native.
shadcn/ui takes the opposite delivery model: its CLI copies component source into your project, where you own and edit it. It ships a core set of accessible components, charts and blocks for Tailwind CSS v4, runs on Radix UI or Base UI (Base UI is the default since July 2026), and defines the registry format that other component libraries publish into.
Where HeroUI shines
- Accessibility depth. React Aria is one of the most thorough accessibility foundations in React, with careful keyboard, focus and screen reader behavior, including for date, time and color fields.
- A versioned package. Fixes reach your app with a version bump instead of a manual merge.
- Web and native. HeroUI Native gives React Native projects a related component set, which helps teams shipping both.
- A finished default look. Components look complete out of the box, and several prebuilt themes are available.
- AI support. An official MCP server,
llms.txtindexes and agent skills help coding assistants use the library.
Where shadcn/ui shines
- You own the code. Changing markup or behavior is an edit in your repo, not an override.
- Primitive choice. A project can run on Radix UI or Base UI.
- The registry. Community registries and the official MCP server work through the same CLI, so you can pull components from many sources.
- Free blocks. Blocks for dashboards, sidebars and login pages are part of the free library.
- Older projects. The docs keep a legacy track for Tailwind CSS v3, while HeroUI v3 requires Tailwind v4 and React 19.
The trade-offs
- Updates or control. HeroUI fixes arrive through npm. shadcn/ui code lives in your repo, so changes are yours to make, and so is pulling in upstream fixes.
- API conventions. HeroUI follows React Aria conventions, such as
onPresson buttons, and uses compound components likeCard.Header. Expect to adjust props and imports when you move screens between the two. - Paid extras. HeroUI Pro sells more components, blocks, full-page templates and design systems. shadcn/ui is free, blocks included.
- Shared variable names. Both themes use an
--accentCSS variable. If you run both in one project, whichever stylesheet loads later wins for that name, so check light and dark mode.
Where MiniDev UI fits
MiniDev UI follows the shadcn/ui model: a free, MIT shadcn-compatible registry on Base UI and Tailwind CSS v4 that copies source into your repo. If you prefer that model but want the kind of full pages HeroUI sells in Pro, such as dashboards and chat, MiniDev UI includes billing, settings, sign in, admin and chat pages and motion components at no cost.
If React Aria and a package you update with a version bump are what you want, HeroUI remains the better fit. See MiniDev UI vs HeroUI and MiniDev UI vs shadcn/ui.
Frequently asked questions
Is HeroUI the same as NextUI?
Yes. HeroUI is the new name for NextUI. Its current major version, HeroUI v3, is built on React Aria Components and Tailwind CSS v4.
Can I copy HeroUI components into my repo like shadcn/ui?
Not in the same way. HeroUI is installed as npm packages, so its source stays in node_modules and you customize it through classes and CSS variables. shadcn/ui copies the source into your project.
Are HeroUI and shadcn/ui free?
Yes. HeroUI is Apache 2.0 licensed and shadcn/ui is MIT licensed, and both allow commercial use. HeroUI Pro, which adds components, blocks, templates and design systems, is paid.
Which is better for accessibility?
Both build on accessible headless primitives: HeroUI on React Aria, shadcn/ui on Base UI or Radix UI. React Aria is especially strong for complex inputs such as date, time and color fields. Test the screens you ship either way.
Does either support React Native?
HeroUI does, through a separate library called HeroUI Native, which gives React Native projects a related component set.
Sources
- HeroUI home
- HeroUI license (version 3, Apache 2.0, checked November 1, 2026)
- HeroUI quick start
- HeroUI theming
- HeroUI MCP server
- HeroUI Pro
- shadcn/ui docs
- shadcn/ui changelog: Base UI as the default (July 2026)
- shadcn/ui changelog: Blocks for Radix and Base UI (February 2026)
- shadcn/ui Tailwind v4 docs
- shadcn/ui MCP server
HeroUI and shadcn/ui are trademarks of their owners. This page is our own summary, checked on September 30, 2026. Pricing and features change, so confirm on their sites.