Can I use HeroUI v3 with Tailwind CSS v3?

No, HeroUI v3 requires Tailwind CSS v4 as a mandatory dependency for its styling system to function correctly.

Why should I use this Claude Code skill for HeroUI?

This skill prevents the AI from using outdated v2 patterns, provides direct access to v3 documentation scripts, and ensures your implementation follows the latest compound component architecture.

What is the main difference between HeroUI v2 and v3?

HeroUI v3 removes the need for a global Provider, adopts Tailwind CSS v4, uses compound component patterns (e.g., Card.Title), and switches to CSS-based animations instead of Framer Motion.

Does HeroUI v3 require a theme provider?

No, unlike previous versions, HeroUI v3 components work directly without a Provider, simplifying the root setup of your application.

How do I handle click events in HeroUI v3?

For better accessibility across devices, HeroUI recommends using the onPress prop instead of the standard onClick handler.

HeroUI React v3 Component Guide

Name: HeroUI React v3 Component Guide
Author: heroui-inc

byheroui-inc

•

28,234

•

Design Tools

Builds accessible, modern React interfaces using HeroUI v3 components and Tailwind CSS v4 architectures.

Provides specialized guidance for implementing HeroUI v3 (formerly NextUI) within React applications, ensuring developers adhere to the latest v3 standards. This skill enforces the use of Tailwind CSS v4, compound component patterns, and OKLCH-based theming while explicitly preventing the use of deprecated v2 patterns like global Providers and Framer Motion dependencies. It includes built-in capabilities to fetch real-time documentation, component anatomy, and CSS variables directly from the HeroUI v3 ecosystem.

Key Features

01Zero-provider configuration guidance for streamlined application roots

02Accessibility-focused development utilizing React Aria Components and onPress handlers

03Tailwind CSS v4 integration and OKLCH color space theming support

04Automated documentation retrieval for props, anatomy, and implementation examples

0528,234 GitHub stars

06Compound component pattern implementation for modular UI structures

Use Cases

01Customizing advanced CSS variable-based themes using the oklch color space

02Rapidly prototyping accessible UI layouts with compound components and Tailwind v4

03Migrating existing React projects from HeroUI v2 to the modernized v3 architecture

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add heroui-inc/heroui heroui-react

For use in Claude.ai and ChatGPT

Download Skill