Agent skill

heroui-react

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.

View SKILL.md on GitHub Repository
Stars 176
Forks 10

Install this agent skill to your Project

npx add-skill https://github.com/AkaraChen/aghub/tree/main/.agents/skills/heroui-react

Metadata

Additional technical details for this skill

author
heroui
version
2.0.0

SKILL.md

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

bash
curl -fsSL https://v3.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@beta
Packages @heroui/system, @heroui/theme @heroui/react@beta, @heroui/styles@beta
tsx
// DO NOT DO THIS - v2 pattern
import { HeroUIProvider } from "@heroui/react";
import { motion } from "framer-motion";

<HeroUIProvider>
	<Card title="Product" description="A great product" />
</HeroUIProvider>;

CORRECT (v3 patterns)

tsx
// DO THIS - v3 pattern (no provider, compound components)
import { Card } from "@heroui/react";

<Card>
	<Card.Header>
		<Card.Title>Product</Card.Title>
		<Card.Description>A great product</Card.Description>
	</Card.Header>
</Card>;

Always fetch v3 docs before implementing.

Core Principles

  • Semantic variants (primary, secondary, tertiary) over visual descriptions
  • Composition over configuration (compound components)
  • CSS variable-based theming with oklch color space
  • BEM naming convention for predictable styling

Accessing Documentation & Component Information

For component details, examples, props, and implementation patterns, always fetch documentation:

Using Scripts

bash
# List all available components
node scripts/list_components.mjs

# Get component documentation (MDX)
node scripts/get_component_docs.mjs Button
node scripts/get_component_docs.mjs Button Card TextField

# Get component source code
node scripts/get_source.mjs Button

# Get component CSS styles (BEM classes)
node scripts/get_styles.mjs Button

# Get theme variables
node scripts/get_theme.mjs

# Get non-component docs (guides, releases)
node scripts/get_docs.mjs /docs/react/getting-started/theming

Direct MDX URLs

Component docs: https://v3.heroui.com/docs/react/components/{component-name}.mdx

Examples:

  • Button: https://v3.heroui.com/docs/react/components/button.mdx
  • Modal: https://v3.heroui.com/docs/react/components/modal.mdx
  • Form: https://v3.heroui.com/docs/react/components/form.mdx

Getting started guides: https://v3.heroui.com/docs/react/getting-started/{topic}.mdx

Important: Always fetch component docs before implementing. The MDX docs include complete examples, props, anatomy, and API references.

Installation Essentials

CRITICAL: HeroUI v3 is currently in BETA. Always use @beta tag when installing packages.

Quick Install

bash
npm i @heroui/styles@beta @heroui/react@beta tailwind-variants

Framework Setup (Next.js App Router - Recommended)

  1. Install dependencies:
bash
npm i @heroui/styles@beta @heroui/react@beta tailwind-variants tailwindcss @tailwindcss/postcss postcss
  1. Create/update app/globals.css:
css
/* Tailwind CSS v4 - Must be first */
@import "tailwindcss";

/* HeroUI v3 styles - Must be after Tailwind */
@import "@heroui/styles";
  1. Import in app/layout.tsx:
tsx
import "./globals.css";

export default function RootLayout({
	children,
}: {
	children: React.ReactNode;
}) {
	return (
		<html lang="en" suppressHydrationWarning>
			<body>
				{/* No Provider needed in HeroUI v3! */}
				{children}
			</body>
		</html>
	);
}
  1. Configure PostCSS (postcss.config.mjs):
js
export default {
	plugins: {
		"@tailwindcss/postcss": {},
	},
};

Critical Setup Requirements

  1. Tailwind CSS v4 is MANDATORY - HeroUI v3 will NOT work with Tailwind CSS v3
  2. Use Compound Components - Components use compound structure (e.g., Card.Header, Card.Content)
  3. Use onPress, not onClick - For better accessibility, use onPress event handlers
  4. Import Order Matters - Always import Tailwind CSS before HeroUI styles

Component Patterns

All components use the compound pattern shown above (dot-notation subcomponents like Card.Header, Card.Content). Don't flatten to props — always compose with subcomponents. Fetch component docs for complete anatomy and examples.

Semantic Variants

HeroUI uses semantic naming to communicate functional intent:

Variant Purpose Usage
primary Main action to move forward 1 per context
secondary Alternative actions Multiple
tertiary Dismissive actions (cancel, skip) Sparingly
danger Destructive actions When needed
ghost Low-emphasis actions Minimal weight
outline Secondary actions Bordered style

Don't use raw colors - semantic variants adapt to themes and accessibility.

Theming

HeroUI v3 uses CSS variables with oklch color space:

css
:root {
	--accent: oklch(0.6204 0.195 253.83);
	--accent-foreground: var(--snow);
	--background: oklch(0.9702 0 0);
	--foreground: var(--eclipse);
}

Get current theme variables:

bash
node scripts/get_theme.mjs

Color naming:

  • Without suffix = background (e.g., --accent)
  • With -foreground = text color (e.g., --accent-foreground)

Theme switching:

html
<html class="dark" data-theme="dark"></html>

For detailed theming, fetch: https://v3.heroui.com/docs/react/getting-started/theming.mdx

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

AkaraChen/aghub

delight

Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.

176 10
Explore
AkaraChen/aghub

project-form-patterns

176 10
Explore
AkaraChen/aghub

clarify

Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.

176 10
Explore
AkaraChen/aghub

critique

Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.

176 10
Explore
AkaraChen/aghub

distill

Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.

176 10
Explore
AkaraChen/aghub

animate

Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.

176 10
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results