Why HeroUI?
HeroUI (previously NextUI) is a production-ready React component library that combines the accessibility rigor of React Aria with the utility-first styling of Tailwind CSS v4. It ships a clean compound component API (Card.Header, Card.Content, Select.Item, …), requires no <Provider> wrapper, and works out of the box with React 19 and Next.js.
Accessible by default — Built on React Aria for WCAG-compliant keyboard, focus, and screen-reader behavior
Tailwind CSS v4 — Modern engine, no CSS-in-JS runtime, smaller output, faster builds
Compound components — Composable API (
Card.Header,Card.Content) instead of deeply nested propsZero boilerplate — No Provider wrapper needed (unlike Chakra, MUI)
AI-native — MCP server,
llms.txt, and agent skills so AI assistants understand your componentsBattle-tested — Previously known as NextUI, trusted by thousands of production apps
Getting Started
Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.
npm install @heroui/reactWho Is This For?
HeroUI is a good fit if you are building:
SaaS applications — forms, tables, overlays, and notifications out of the box
Dashboards & admin panels — data-dense layouts with consistent design tokens
E-commerce storefronts — performant, accessible, SEO-friendly components
Marketing sites & landing pages — polished UI without a heavyweight runtime
Any React / Next.js project that values design quality and accessibility
AI-Powered Development
HeroUI is built for the AI-assisted development workflow.
Tool | What it does |
|---|---|
MCP Server ( | Components that understand your theme — install the server in Cursor, Claude Code, Windsurf, or any MCP-compatible editor |
llms.txt | Available at heroui.com/llms.txt — structured context for LLMs about every component |
Agent Skills | Run |
Works with Cursor, Claude Code, Windsurf, GitHub Copilot, and any tool that supports MCP or llms.txt.
Compared To
Library | How HeroUI differs |
|---|---|
shadcn/ui | HeroUI is batteries-included with a consistent design system; shadcn is copy-paste-customize |
MUI | HeroUI is lighter, Tailwind-native, no CSS-in-JS runtime overhead |
Chakra UI | HeroUI uses React Aria (stronger a11y primitives) and Tailwind v4 (better perf) |
Mantine | HeroUI has AI tooling (MCP, llms.txt), Tailwind-first styling |
