heroui-react

# HeroUI v3 React Development Guide HeroUI v3 is a component library built on **Tailwind CSS v4** and **React Aria Components**, providing accessible, customizable UI components for React applications. --- ## Installation ```bash curl -fsSL https://v3.heroui.com/install | bash -s heroui-react ``` --- ## CRITICAL: v3 Only - Ignore v2 Knowledge **This guide is for HeroUI v3 ONLY.** Do NOT apply v2 patterns — the provider, styling, and component API all changed: | Feature | v2 (DO NOT USE) | v3 (USE THIS) | | ------------- | --------------------------------- | ------------------------------------------- | | Provider | `<HeroUIProvider>` required | **No Provider needed** | | Animations | `framer-motion` package | CSS-based, no extra deps | | Component API | Flat props: `<Card title="x">` | Compound: `<Card><Card.Header>` | | Styling | Tailwind v3 + `@heroui/theme` | Tailwind v4 + `@heroui/styles@beta` | | Packages | `@heroui/system`, `@heroui/theme` | `@heroui/react@beta`, `@heroui/styles@beta` | ```tsx // DO NOT DO THIS - v2 pattern import { HeroUIProvider } from "@heroui/react"; import { motion } from "framer-motion"; <HeroUIProvider> <Card title="Product" description="A great product" /> </HeroUIProvider>; ``` ### CORRECT (v3 patterns) ```tsx // DO THIS - v3 pattern (no provider, compound components) import { C...