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
Decision gist · record as of 2026-07-27
heroui-react provides v3 React components built on Tailwind CSS v4 and React Aria for accessible, composable UIs. 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.
Use it when
- heroui-react v3 modernizes the component library with Tailwind CSS v4 integration, oklch color variables for theming.
- heroui-react supports theme customization through oklch CSS variables in your tailwind.config.js.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
AkaraChen/aghub/heroui-react · repository language: TypeScript
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
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)
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
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 and Tailwind CSS”
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 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 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.
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.
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.
Aceternity UI is a production-ready component library offering 100+ animated, interactive React elements designed for Next.js applications. Built with Tailwind CSS and Framer Motion, it includes hero sections, parallax effects, 3D cards, and background animations—all installable via shadcn CLI with full source code access for customization.
Expert guidance for TailwindCSS v4 configuration in server-rendered environments, covering SSR/SSG styling patterns, critical CSS extraction, and FOUC prevention. Walks through version-specific setup, framework integration, and performance optimization across Vite, Next.js, SvelteKit, and other build tools.
More skills tailwindcss-debugging (MIT) · tailwindcss-performance (MIT) · tailwindcss-fundamentals-v4 (MIT) · React Google Maps (unlicensed) · Tailwind (unlicensed)