Heroui
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 v3 helps you build accessible React interfaces using Tailwind CSS v4 and compound components.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-18
HeroUI v3 helps you build accessible React interfaces using Tailwind CSS v4 and compound components. 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.
Use it when
- HeroUI v3 installs via npm or yarn into Next.js projects.
- HeroUI v3 uses compound component patterns—components like Card, Modal, and Dropdown are composed of smaller semantic parts (Card.Header.
Verify before relying
Read SKILL.md below before installing (11 files). Open directory: indexed for reading, not audited.
Install
ruchernchong/claude-kit/heroui · 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 you build a React UI with HeroUI v3?
HeroUI v3 provides accessible React components built on Tailwind CSS v4 and React Aria. Build UIs by importing compound components (Button, Card, Modal, etc.), composing them with semantic variants, and styling via Tailwind classes or CSS variables. HeroUI requires no provider setup—components work standalone in Next.js, Vite, or other React frameworks.
How do you install HeroUI v3 in Next.js?
HeroUI v3 installs via npm or yarn into Next.js projects. Configure Tailwind CSS v4 in your tailwind.config.js, add HeroUI's preset, and import component styles. HeroUI v3 works without a provider wrapper, so you can immediately import and use components like Button, Input, or Card in your pages and layouts.
What are HeroUI v3 compound components and how do you use them?
HeroUI v3 uses compound component patterns—components like Card, Modal, and Dropdown are composed of smaller semantic parts (Card.Header, Card.Body, Modal.Header, etc.). This pattern lets you build flexible layouts by combining parts, controlling state through parent components, and maintaining accessibility without manual ARIA management.
How do you customize HeroUI themes and colors with CSS variables?
HeroUI v3 theming uses CSS variables and design tokens based on OKLCH color space. Customize by overriding variables in your Tailwind config or global CSS, adjusting semantic variants (primary, secondary, success, etc.), and modifying spacing, radius, and typography tokens. Theme utilities and scripts in HeroUI help generate and preview custom themes.
What are the main differences between HeroUI v2 and v3?
HeroUI v3 removes the provider requirement, upgrades to Tailwind CSS v4, and refactors components as compound patterns. Breaking changes include updated component APIs, CSS variable naming, and styling approach. Migration involves updating imports, removing providers, and adjusting theme configuration; HeroUI v3 documentation includes a migration guide.
Does HeroUI v3 support accessible form and navigation components?
HeroUI v3 emphasizes accessibility via React Aria integration. Form components (Input, Select, Checkbox, Radio) include built-in validation, keyboard navigation, and ARIA labels. Navigation components (Tabs, Navbar, Dropdown) support keyboard shortcuts, focus management, and semantic HTML, ensuring compliance with WCAG standards.
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.
CRITICAL: v3 Only - Ignore v2 Knowledge
This guide is for HeroUI v3 ONLY. Do NOT use any prior knowledge of HeroUI v2.
What Changed in v3
| Feature | v2 (DO NOT USE) | v3 (USE THIS) |
|---|---|---|
| Provider | <HeroUIProvider> required |
No Provider needed |
| Animations | framer-motion package |
CSS-based, |
(truncated - see the full file via the links below)
File tree — 11 files
skills/heroui/LICENSE.txt
skills/heroui/SKILL.md
skills/heroui/references/accessibility-guide.md
skills/heroui/references/component-patterns.md
skills/heroui/references/theming-customization.md
skills/heroui/scripts/get_component_docs.mjs
skills/heroui/scripts/get_docs.mjs
skills/heroui/scripts/get_source.mjs
skills/heroui/scripts/get_styles.mjs
skills/heroui/scripts/get_theme.mjs
skills/heroui/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 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 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 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.
Automates the mechanical parts of upgrading from Tailwind v3 to v4, then handles the judgment calls the codemod can't: reconciling dependencies, porting config to CSS-first `@theme`, auditing v4's changed defaults (border, ring, placeholder, cursor, dialog, hover), and verifying the rendered output stays identical. Works across Next.js, Vite, Tailwind CLI, and plain PostCSS setups.
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.
Resolve Tailwind CSS styling problems with structured troubleshooting for classes that won't apply, dynamic class generation failures, and version migration conflicts. Get decision trees, configuration templates, and debugging steps for content detection, IntelliSense setup, and build cache issues.
More skills tailwindcss-performance (MIT) · Tailwind Ssr (unlicensed) · tailwindcss-fundamentals-v4 (MIT) · tailwindcss-framework-integration (MIT) · Tailwind Css (unlicensed)