heroui-inc/heroui(opens in a new tab)
Language: TypeScript
🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
- stars
- 31,076
- watchers
- 92
- forks
- 2,242
- open issues
- 8
- Last updated
- 10/31/2026
Language: TypeScript
🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
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.
Card.Header, Card.Content) instead of deeply nested propsllms.txt, and agent skills so AI assistants understand your components| Package | Description |
|---|---|
@heroui/react |
Full component bundle |
@heroui/styles |
Styles / theme only |
| Component subpaths | e.g. @heroui/react/button, @heroui/react/modal — per-component imports from the published @heroui/react package |
Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.
npm install @heroui/styles @heroui/react
HeroUI is a good fit if you are building:
HeroUI is built for the AI-assisted development workflow.
| Tool | What it does |
|---|---|
MCP Server (@heroui/react-mcp) |
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 |
| AGENTS.md | Run npx heroui-cli@latest agents-md --react to download React v3 documentation into your project |
| Agent Skills | Run npx skills add heroui-inc/heroui to install skills for supported coding agents |
Works with Cursor, Claude Code, Windsurf, GitHub Copilot, and any tool that supports MCP or llms.txt.
| 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 |
Visit storybook-v3.heroui.com to view the storybook for all components.
Visit herouiv3.featurebase.app/roadmap to view the roadmap for HeroUI v3.
Visit the HeroUI Figma Kit (v3) to view the design kit.
We're excited to see the community adopt HeroUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
Contributions are always welcome!
See CONTRIBUTING.md for ways to get started.
Please adhere to this project's CODE_OF_CONDUCT.