QQ美丽快活的现代反应UI库. (原为下个UI)
概览
HeroUI(前作"NextUI")是一款可被制作准备的React组件库,将React Aria的可访问性刚性与Tailwind CSS v4的实用先发型结合. 它运载一个干净的化合物组件API(Card. 标题 名片 切入 选择 不需要包装,然后用回放19和Next.js在盒子里工作。 - 在React Aria上为符合WCAG的键盘,焦点,和屏幕阅读器行为所建 - 现代引擎,没有CSS-in-JS运行时间,输出更小,构建更快 - 编译API(Card. 信头, Card. Content) 而非深嵌道具 – 不需要提供方包装(与Chakra, MUI不同) – MCP服务器, llms.txt, 以及代理技能, 以便AI助手理解您的组件 – 前称 NextUI, 被上千个出品应用所信任 访问 heroui.com/docs/ react/geting-started/快克-start 开始与"英雄UI".
概述（AI 翻译）
为什么是英雄?
HeroUI(前作"NextUI")是一款可被制作准备的React组件库,将React Aria的可访问性刚性与Tailwind CSS v4的实用先发型结合. 它运载一个干净的化合物组件API([[T0],[T1],[T2],.),不需要 包装,并且用React 19和Next.js在箱外工作.
- ** 默认可访问** — 为符合 WCAG 的键盘、 焦点和屏幕阅读器行为在 React Aria 上构建
- Tailwind CSS v4 — 现代引擎,没有CSS-in-JS运行时间,输出更小,建设更快
- ** 复合组件**——可编译的API([[T4],[T5])而不是深嵌道具
- 零锅炉板——不需要供货商包装(与Chakra、MUI不同)
- AI-native — MCP服务器,
llms.txt,以及代理技能,以便AI助手理解您的组件 - Battle测试 — 前作"NextUI",被上千个生产应用软件所信任.
□ 软件包
- 包 * 说明 *
|-|-|-.
@heroui/react完整组件捆绑 QQ [ [T8] QQ 样式/ 主题只 QQ - 组件子路径,例如:.
本页由 AI 翻译，技术细节请以原文为准。
README
以下为原文 README 节选，完整内容请查看原文。
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 `` 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 props - Zero boilerplate — No Provider wrapper needed (unlike Chakra, MUI)
- AI-native — MCP server,
llms.txt, and agent skills so AI assistants understand your components - Battle-tested — Previously known as NextUI, trusted by thousands of production apps
Packages
| 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 |
Getting Started
Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.
npm install @heroui/styles @heroui/react
Who 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 (@heroui/react-mcp) |
Components that understand your theme — install the server in Cursor, Claude Code, Windsurf, or any MCP-compatible editor |
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add heroui-inc/heroui