heroui README

The project's README from github.com/heroui-inc/heroui. As one markdown file: README.md.

HeroUI v3 logo

License npm downloads

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.

Packages

Package Description
@heroui/react Full component bundle
@heroui/styles Styles / theme only
Individual packages e.g. @heroui/button, @heroui/modal — tree-shakeable per-component imports

Getting Started

Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.

npm install @heroui/react

Who Is This For?

HeroUI is a good fit if you are building:

AI-Powered Development

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
Agent Skills Run npx heroui-cli agents-md to install skills for Cursor, Claude Code, and more

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

Documentation

Storybook

Visit storybook-v3.heroui.com to view the storybook for all components.

Roadmap

Visit herouiv3.featurebase.app/roadmap to view the roadmap for HeroUI v3.

Figma

Visit the HeroUI Figma Kit (v3) to view the design kit.

Community

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!

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Please adhere to this project's CODE_OF_CONDUCT.

License

MIT

heroui (heroui-inc/heroui)

Searching Database…

31K ·GitHub
这是什么?HeroUI(前身为 NextUI)是一个可用于生产环境的 React 组件库,它将 React Aria 的无障碍基础能力与 Tailwind CSS v4 样式结合在一起。
这是 UI 库还是完整框架?它是一个组件库,需要安装到你自己的 React 或 Next.js 应用中,而不是独立的框架。它提供复合组件 API(例如 Card.Header、Select.Item),无需外层包裹 Provider。
我该怎么把它添加到项目里?请参照 heroui.com/docs 上的快速入门指南。你可以通过 @heroui/react 包安装完整套件,也可以单独安装支持按需引入(tree-shakeable)的组件包,例如 @heroui/button 或 @heroui/modal。
我是否需要先配置好 Tailwind CSS?需要。HeroUI 的样式基于 Tailwind CSS v4 构建,而不是 CSS-in-JS 运行时,并且开箱即可与 React 19 和 Next.js 配合使用。
这个项目和 NextUI 是同一个吗?是的。HeroUI 是 NextUI 更名后的延续版本,因此现有的 NextUI 应用和文档可以直接对应到 HeroUI。注意 v2 和 v3 的文档位于不同网站(v2.heroui.com 与 heroui.com)。
HeroUI 适合哪类应用?适用于 SaaS 应用、仪表盘/管理后台、电商店铺和营销网站,基本上任何希望获得无障碍、精致 UI 的 React/Next.js 项目都适用。
它包含哪些 AI 辅助开发工具?HeroUI 提供了 MCP 服务器(@heroui/react-mcp),可用于 Cursor、Claude Code 和 Windsurf 等编辑器;还提供位于 heroui.com/llms.txt 的结构化 llms.txt 文件,以及可通过 npx heroui-cli agents-md 安装的智能体技能(agent skills)。
它与 shadcn/ui 或 MUI 有什么不同?与 shadcn 的“复制粘贴后再自定义”模式不同,HeroUI 是开箱即用、设计体系统一的完整方案;与 MUI 相比,它更轻量,原生基于 Tailwind,没有 CSS-in-JS 运行时的额外开销。
我能只引入一个组件,而不是整个库吗?可以。除了完整的 @heroui/react 套件外,每个组件也都以独立的可按需引入(tree-shakeable)包发布,例如 @heroui/button、@heroui/modal。
有没有设计套件或在线演示可以查看组件?有。HeroUI 提供 v3 版本的 Figma 设计套件,并且可以在 storybook-v3.heroui.com 浏览包含全部组件的 Storybook。
Creator
heroui-inc
Size
110.4 MB
Stars
31K
Age
5y
Commits · 90 Days