HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.
Detected risks:
HeroUI v3 React is a powerful component library designed to streamline the development of accessible, customizable UIs in React applications. Built on top of Tailwind CSS v4 and React Aria, this library provides a set of UI components such as Buttons, Modals, Forms, and Cards, all optimized for accessibility and responsiveness. It allows developers to easily integrate styled components into their applications with minimal configuration, ensuring a smooth and efficient UI development experience.
With HeroUI v3, the focus is on composition over configuration, offering compound components that promote a more intuitive and maintainable approach to building UIs. It uses semantic variants like 'primary', 'secondary', and 'tertiary' to ensure clarity in usage and adopts the BEM (Block Element Modifier) naming convention for predictable styling. The library leverages CSS variable-based theming using the 'oklch' color space, providing a flexible way to manage dark and light themes across the application.
This skill is particularly valuable for React developers who need a flexible and accessible UI toolkit to accelerate the development process while maintaining a consistent, responsive design. It's ideal for building modern web applications that require rich, customizable UI components while adhering to accessibility best practices.
You can install HeroUI v3 React by running the command `npm i @heroui/styles @heroui/react tailwind-variants` to add the necessary packages.
In HeroUI v3, there is no need for a `<HeroUIProvider>`, animations are CSS-based, and the component API follows a compound structure. It also uses Tailwind CSS v4 and `@heroui/styles` instead of the v2 packages.
For Next.js, install the dependencies with `npm i @heroui/styles @heroui/react tailwind-variants tailwindcss @tailwindcss/postcss postcss`, and then update `app/globals.css` to include Tailwind CSS v4.
You can access component documentation using the script commands like `node scripts/get_component_docs.mjs Button` or by visiting direct MDX URLs such as `https://heroui.com/docs/react/components/button.mdx`.
HeroUI v3 supports theming based on CSS variables using the 'oklch' color space, enabling easy configuration for both dark and light modes.
Quick Setup:
.claude/skills/Repository
heroui-inc/heroui