{"enrichment":{"faq":[{"a":"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\u2014components work standalone in Next.js, Vite, or other React frameworks.","q":"How do you build a React UI with HeroUI v3?"},{"a":"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.","q":"How do you install HeroUI v3 in Next.js?"},{"a":"HeroUI v3 uses compound component patterns\u2014components 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.","q":"What are HeroUI v3 compound components and how do you use them?"},{"a":"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.","q":"How do you customize HeroUI themes and colors with CSS variables?"},{"a":"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.","q":"What are the main differences between HeroUI v2 and v3?"},{"a":"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.","q":"Does HeroUI v3 support accessible form and navigation components?"}],"shadow_tags":["component-library","accessible-ui","react-aria","compound-components","tailwind-integration","theme-customization","form-building","semantic-variants","wcag-compliant","beta-framework"],"summary_rewrite":"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."},"files":[{"bytes":28953,"path":"skills/heroui/SKILL.md","sha256":"bfeaa549ca7c07a1def24f7ff57bc7d8476b04bb40dce4040e6e75247e6aa172","url":"https://skillfed.io/files/ruchernchong/claude-kit/heroui/9077c73d/SKILL.md"}],"id":"ruchernchong/claude-kit/heroui","links":{"html":"https://skillfed.io/ruchernchong/claude-kit/heroui","md":"https://skillfed.io/ruchernchong/claude-kit/heroui.md","repo":"https://github.com/ruchernchong/claude-kit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":1,"language":"TypeScript","last_updated":"2026-05-18","license":"MIT","name":"Heroui","publisher":"ruchernchong","stars":0},"relations":{"similar":[{"id":"AkaraChen/aghub/heroui-react"},{"id":"heroui-inc/heroui/heroui-react"},{"id":"heroui-inc/heroui/heroui-native"},{"id":"heroui-inc/heroui/heroui-migration"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-debugging"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-performance"},{"id":"Tomlord1122/tomtom-skill/tailwind-ssr"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration"},{"id":"EnderPuentes/ai-agent-skills/tailwind-css"}]},"slug":{"owner":"ruchernchong","repo":"claude-kit","skill":"heroui"},"version":"9077c73d"}