heroui-react
HeroUI v3 is a React component library combining Tailwind CSS v4 and React Aria to deliver accessible, customizable UI elements. Build with compound components like Card.Header and Card.Content, semantic variants, and CSS variable theming in oklch color space—no provider needed.
heroui-react provides v3 React components built on Tailwind CSS v4 and React Aria for accessible, composable UIs.
AI-generated summary based on this skill's SKILL.md
Install
AkaraChen/aghub/heroui-react · repository language: TypeScript
git clone https://github.com/AkaraChen/aghub
cp -r aghub/.agents/skills/heroui-react ~/.claude/skills/heroui-reactnpx skillfed install AkaraChen/aghub/heroui-reactFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I install heroui in a React project?
heroui-react installs via npm or yarn alongside Tailwind CSS v4. Run `npm install @heroui/react` in your React project, then configure Tailwind to include HeroUI's content paths in your tailwind.config.js. No provider wrapper is required—HeroUI v3 works directly with your existing Tailwind setup.
What is heroui v3 and how does it differ from v2?
heroui-react v3 modernizes the component library with Tailwind CSS v4 integration, oklch color variables for theming, and React Aria accessibility. v3 removes the provider requirement, adds semantic variants for flexible styling, and improves compound component patterns. Migration involves updating imports and leveraging the new CSS variable system.
How do I customize heroui themes using dark and light modes?
heroui-react supports theme customization through oklch CSS variables in your tailwind.config.js. Define color tokens in oklch format for both light and dark modes, then HeroUI components automatically respect your theme. Use Tailwind's dark: prefix or data-theme attributes to toggle between modes without additional configuration.
Can you show heroui button modal form examples?
heroui-react provides compound components like Button, Modal, and Form with semantic variants. Combine Button with onClick handlers, Modal with isOpen state, and Form with input components for complete patterns. Each component accepts color, size, and variant props; use React Aria hooks for accessibility and Tailwind classes for custom styling.
How to use heroui v3 compound components and semantic variants?
heroui-react compound components like Card.Header, Card.Body, and Card.Footer compose together for flexible layouts. Semantic variants (solid, bordered, flat, faded, shadow, light) apply consistent styling across Button, Badge, Chip, and other elements. Combine variants with color and size props to build accessible, customizable interfaces aligned with your design system.
Is heroui compatible with Next.js and responsive design?
heroui-react works seamlessly with Next.js when Tailwind CSS v4 is configured. Components are fully responsive using Tailwind's breakpoint system (sm, md, lg, xl). HeroUI's compound structure and semantic variants adapt to any screen size, and React Aria ensures accessibility across devices and interaction modes.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
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 |
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
.agents/skills/heroui-react/LICENSE.txt
.agents/skills/heroui-react/SKILL.md
.agents/skills/heroui-react/scripts/get_component_docs.mjs
.agents/skills/heroui-react/scripts/get_docs.mjs
.agents/skills/heroui-react/scripts/get_source.mjs
.agents/skills/heroui-react/scripts/get_styles.mjs
.agents/skills/heroui-react/scripts/get_theme.mjs
.agents/skills/heroui-react/scripts/list_components.mjs