HeroUI v3 React 开发指南

HeroUI v3 是基于 Tailwind CSS v4 和 React Aria Components 构建的组件库，为 React 应用提供可访问、可定制的 UI 组件。

---

安装

curl -fsSL https://heroui.com/install | bash -s heroui-react

---

关键提示：仅限 v3 — 忽略 v2 知识

本指南仅适用于 HeroUI v3。 请勿套用 v2 模式——Provider、样式以及组件 API 都已变更：

特性	v2（请勿使用）	v3（请使用此版本）
Provider	需要 <HeroUIProvider>	无需 Provider
动画	framer-motion 包	基于 CSS，无需额外依赖
组件 API	扁平 props：<Card title="x">	复合式：<Card><Card.Header>
样式	Tailwind v3 + @heroui/theme	Tailwind v4 + @heroui/styles
包	@heroui/system、@heroui/theme	@heroui/react、@heroui/styles

// 不要这样做 - v2 模式
import { HeroUIProvider } from "@heroui/react";
import { motion } from "framer-motion";

<HeroUIProvider>
	<Card title="Product" description="A great product" />
</HeroUIProvider>;

正确方式（v3 模式）

// 请这样做 - v3 模式（无需 Provider，使用复…