{"enrichment":{"faq":[{"a":"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\u2014HeroUI v3 works directly with your existing Tailwind setup.","q":"How do I install heroui in a React project?"},{"a":"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.","q":"What is heroui v3 and how does it differ from v2?"},{"a":"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.","q":"How do I customize heroui themes using dark and light modes?"},{"a":"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.","q":"Can you show heroui button modal form examples?"},{"a":"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.","q":"How to use heroui v3 compound components and semantic variants?"},{"a":"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.","q":"Is heroui compatible with Next.js and responsive design?"}],"shadow_tags":["component-library","tailwind-integration","react-aria","accessible-ui","css-variables","compound-pattern","semantic-design","theme-switching"],"summary_rewrite":"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\u2014no provider needed."},"files":[{"bytes":6674,"path":".agents/skills/heroui-react/SKILL.md","sha256":"02d75890ed2617140ab5cfa748dbccfad69ef724aa7150b303fd7f31a7379fc4","url":"https://skillfed.io/files/AkaraChen/aghub/heroui-react/36a110e8/SKILL.md"}],"id":"AkaraChen/aghub/heroui-react","links":{"html":"https://skillfed.io/AkaraChen/aghub/heroui-react","md":"https://skillfed.io/AkaraChen/aghub/heroui-react.md","repo":"https://github.com/AkaraChen/aghub"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":17,"language":"TypeScript","last_updated":"2026-07-27","license":"MIT","name":"heroui-react","publisher":"AkaraChen","stars":271},"relations":{"similar":[{"id":"heroui-inc/heroui/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":"AkaraChen","repo":"aghub","skill":"heroui-react"},"version":"36a110e8"}