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
Decision gist · record as of 2026-07-28
heroui-react provides v3 component library with Tailwind CSS v4 and React Aria for building accessible React interfaces. 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.
Use it when
- HeroUI v3 installs via the @heroui/react package.
- Install HeroUI v3 using npm or your package manager with @heroui/react.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
heroui-inc/heroui/heroui-react · repository language: MDX
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build accessible React UIs with HeroUI v3 components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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.
This skill guides agents through upgrading HeroUI v2 applications to v3, addressing breaking changes like compound components, removed Provider requirements, and event handler renaming. It provides migration workflows for both full and incremental approaches, component-specific guides, and styling updates to keep projects functional during the transition.
HeroUI Native is a component library for React Native built on Uniwind (Tailwind CSS adapted for mobile) and React Native, delivering accessible, customizable UI components for iOS and Android. Use compound component patterns to compose Buttons, Cards, TextFields, Dialogs, and more with semantic variants and HSL-based theming. Always fetch component documentation before implementing to access complete examples, props, and API references.
HeroUI v3 provides a component library for React built on Tailwind CSS v4 and React Aria, emphasizing accessibility and semantic design. Set up in Next.js or Vite, use compound components without a provider, and customize with CSS variables and design tokens. Access component docs, source code, and theme utilities via included scripts.
Inspira UI provides over 120 copy-paste animated components designed for Vue 3 and Nuxt 4 projects. Built with TailwindCSS v4, motion-v, GSAP, and Three.js, it covers hero sections, 3D effects, text animations, interactive cursors, and particle systems—all production-tested and MIT-licensed.
NativeWind brings Tailwind CSS styling to React Native, compiling utilities for both web and native platforms. It supports responsive design, dark mode, platform-specific variants, and pseudo-classes like hover and focus. Configure via CSS-first setup with custom themes and utilities.
More skills Tailwind Ssr (unlicensed) · tailwindcss-debugging (MIT) · tailwindcss-performance (MIT) · tailwindcss-fundamentals-v4 (MIT) · Tailwind (unlicensed)