heroui-react
HeroUI v3 is a React component library built on Tailwind CSS v4 and React Aria, offering accessible, composable UI elements like Buttons, Modals, Forms, and Cards. It uses compound components (dot-notation subcomponents), semantic variants for intent-driven styling, and CSS variable theming with oklch color space—no provider required. Always fetch component docs before implementing to access complete examples and API references.
heroui-react provides v3 component library with Tailwind CSS v4 and React Aria for building accessible React interfaces.
AI-generated summary based on this skill's SKILL.md
Install
heroui-inc/heroui/heroui-react · repository language: MDX
git clone https://github.com/heroui-inc/heroui
cp -r heroui/skills/heroui-react ~/.claude/skills/heroui-reactnpx skillfed install heroui-inc/heroui/heroui-reactFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is HeroUI v3 and how does it work with React?
HeroUI v3 is a React component library built on Tailwind CSS v4 and React Aria that provides accessible, composable UI elements like Buttons, Modals, Forms, and Cards. It uses compound components with dot-notation subcomponents (e.g., Modal.Header, Modal.Body) and semantic variants for intent-driven styling. HeroUI v3 requires no provider setup, making integration straightforward into existing React projects.
How do you install HeroUI v3 in a React project?
HeroUI v3 installs via the @heroui/react package. After adding the package to your project, configure Tailwind CSS v4 to include HeroUI's preset in your tailwind.config file. This enables HeroUI's component styles and theming system. Refer to the component documentation for complete setup instructions and configuration examples specific to your build environment.
How to install heroui v3 and set up Tailwind CSS v4 components?
Install HeroUI v3 using npm or your package manager with @heroui/react, then update your Tailwind CSS v4 configuration to include HeroUI's preset. This integrates HeroUI's component styles and enables semantic variants. Once configured, import components directly into your React files and use compound component syntax (Button, Modal.Header, etc.) with Tailwind classes for styling.
Can you customize HeroUI themes using oklch CSS variables?
HeroUI v3 supports theme customization through oklch CSS variables, allowing you to define colors in the oklch color space for perceptually uniform theming. Customize theme variables in your Tailwind config or CSS to override default colors, spacing, and component styles. This approach provides flexible, accessible color theming without requiring a provider wrapper.
What are the main differences between HeroUI v2 and v3?
HeroUI v3 migrates to Tailwind CSS v4 and React Aria for improved accessibility and performance. Key differences include no provider requirement, compound component patterns with dot notation, semantic variants for clearer intent-driven styling, and oklch-based CSS variable theming. Component APIs remain similar, but v3 emphasizes composability and accessibility standards from React Aria.
How do you implement compound components and semantic variants?
HeroUI v3 compound components use dot notation: Modal.Header, Modal.Body, Modal.Footer. Semantic variants like primary, secondary, and success apply intent-driven styling to components. Combine these patterns by nesting subcomponents and applying variant props to control appearance and behavior. Check component documentation for available variants and composition patterns for each element.
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://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
skills/heroui-react/LICENSE.txt
skills/heroui-react/SKILL.md
skills/heroui-react/scripts/get_component_docs.mjs
skills/heroui-react/scripts/get_docs.mjs
skills/heroui-react/scripts/get_source.mjs
skills/heroui-react/scripts/get_styles.mjs
skills/heroui-react/scripts/get_theme.mjs
skills/heroui-react/scripts/list_components.mjs