{"enrichment":{"faq":[{"a":"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.","q":"What is HeroUI v3 and how does it work with React?"},{"a":"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.","q":"How do you install HeroUI v3 in a React project?"},{"a":"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.","q":"How to install heroui v3 and set up Tailwind CSS v4 components?"},{"a":"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.","q":"Can you customize HeroUI themes using oklch CSS variables?"},{"a":"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.","q":"What are the main differences between HeroUI v2 and v3?"},{"a":"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.","q":"How do you implement compound components and semantic variants?"}],"shadow_tags":["component-library","tailwind-integration","react-aria-based","compound-pattern","css-variables-theming","accessibility-first","semantic-design","next-js-ready"],"summary_rewrite":"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\u2014no provider required. Always fetch component docs before implementing to access complete examples and API references."},"files":[{"bytes":6525,"path":"skills/heroui-react/SKILL.md","sha256":"92a42da5bfc89635847ac18083bfba43cf841b30e85dd1c363e610c5a398c8bc","url":"https://skillfed.io/files/heroui-inc/heroui/heroui-react/238baf0c/SKILL.md"}],"id":"heroui-inc/heroui/heroui-react","links":{"html":"https://skillfed.io/heroui-inc/heroui/heroui-react","md":"https://skillfed.io/heroui-inc/heroui/heroui-react.md","repo":"https://github.com/heroui-inc/heroui"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2204,"language":"MDX","last_updated":"2026-07-28","license":"Apache-2.0","name":"heroui-react","publisher":"heroui-inc","stars":30221},"relations":{"similar":[{"id":"AkaraChen/aghub/heroui-react"},{"id":"ruchernchong/claude-kit/heroui"},{"id":"heroui-inc/heroui/heroui-native"},{"id":"heroui-inc/heroui/heroui-migration"},{"id":"Tomlord1122/tomtom-skill/tailwind-ssr"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-debugging"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-performance"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"existential-birds/beagle/tailwind-v4"},{"id":"oakoss/agent-skills/tailwind"}]},"slug":{"owner":"heroui-inc","repo":"heroui","skill":"heroui-react"},"version":"238baf0c"}