Heroui React

A solid React component library that's made the jump to Tailwind v4 and ditched the provider requirement from v2. Built on React Aria for real accessibility and uses compound component patterns throughout (think Card.Header, Card.Content instead of flat props). The semantic variant system (primary, secondary, tertiary) is more opinionated than most libraries, which actually helps if you're tired of bikeshedding button colors. Uses oklch for theming, so color conversions are mathematically sound. The v2 to v3 migration is breaking enough that you'll want to treat this as a new library if you're upgrading. Good fit if you want accessible components without writing aria attributes yourself and don't mind learning their composition patterns.

skills.sh installs: 12.6K
GitHub stars: 31.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add heroui-inc/heroui --skill heroui-react --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

Installation

curl -fsSL https://heroui.com/install | bash -s heroui-react

CRITICAL: v3 Only - Ignore v2 Knowledge

This guide is for HeroUI v3 ONLY. Do NOT apply v2 patterns — the provider, styling, and component API all changed:

Feature	v2 (DO NOT USE)	v3 (USE THIS)
Provider	`<HeroUIProvider>` required	No Provider needed
Animations	`framer-motion` package	CSS-based, no extra deps
Component API	Flat props: `<Card title="x">`	Compound: `<Card><Card.Header>`
Styling	Tailwind v3 + `@heroui/theme`	Tailwind v4 + `@heroui/styles`
Packages	`@heroui/system`, `@heroui/theme`	`@heroui/react`, `@heroui/styles`