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
Install
ruchernchong/claude-kit/heroui · repository language: TypeScript
git clone https://github.com/ruchernchong/claude-kit
cp -r claude-kit/skills/heroui ~/.claude/skills/herouinpx skillfed install ruchernchong/claude-kit/herouiFrequently 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)
Read as markdown · JSON record · Browse the source repository
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