Build accessible UIs using HeroUI v3 components (React + Tailwind CSS v4 + React Aria). Use when creating React interfaces, selecting UI components, implementing forms, navigation, overlays, or data display. Use when installing HeroUI v3, customizing themes, accessing component documentation, building with compound components, or working with component APIs. Keywords: HeroUI, Hero UI, heroui, React Aria, accessible components, Tailwind CSS v4, @heroui/react@beta, @heroui/styles@beta, v3 beta, component APIs, UI components.
HeroUI v3 is a component library built on Tailwind CSS v4 and React Aria Components, providing accessible, customizable UI components for React applications.
This guide is for HeroUI v3 ONLY. Do NOT use any prior knowledge of HeroUI v2.
| 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> |
| Event handlers | onClick | onPress (React Aria) |
| Styling | Tailwind v3 + @heroui/theme | Tailwind v4 + @heroui/styles@beta |
| Packages | @heroui/system, @heroui/theme | @heroui/react@beta, @heroui/styles@beta |
// 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>
// DO THIS - v3 pattern (no provider, compound components)
import { Card } from '@heroui/react@beta';
<Card>
<Card.Header>
<Card.Title>Product</Card.Title>
<Card.Description>A great product</Card.Description>
</Card.Header>
</Card>
Always fetch v3 docs before implementing. Do not assume v2 patterns work.
primary, secondary, tertiary) over visual descriptionsoklch color spaceFetch component documentation via MDX routes: