skills.rest
Chia1104
Chia1104COMMUNITY
Explore all skills by this author →
Website𝕏@chia7423GitHub

heroui-react

Implements HeroUI v3 React components with Tailwind CSS v4 and React Aria.

1|Updated Aug 11, 2026
Search Tags:#theming#React#Next.js#component library#tailwind css#HeroUI#react aria
One-click install
npx skills add https://github.com/Chia1104/agent-air --skill heroui-react-chia1104
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-react
Source: https://github.com/Chia1104/agent-air/tree/main/skills/shared/heroui-react
Command: npx skills add https://github.com/Chia1104/agent-air --skill heroui-react-chia1104

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? HeroUI v3 introduced breaking changes from v2 (no Provider, compound components, Tailwind CSS v4), so outdated knowledge leads to broken implementations. This Skill provides correct v3 patterns and live documentation access for building React UIs with HeroUI. ## Core Features & Use Cases - v3 Implementation Guidance: Enforces correct patterns such as compound components, semantic variants, onPress handlers, and beta package installation. - Live Documentation Fetching: Scripts retrieve component docs (MDX), source code, CSS styles, theme variables, and the full component list from the HeroUI API with fallbacks to v3.heroui.com and GitHub. - Theming Support: Access oklch-based CSS variables and light/dark theme tokens for customization. - Use Case: When asked to add a Card or Modal to a Next.js app, the Skill fetches the current v3 component anatomy and props before writing code, avoiding deprecated v2 patterns like HeroUIProvider or framer-motion. ## Quick Start Ask the AI to build a HeroUI v3 Card component for a Next.js app and fetch the latest component documentation first.

Frequently Asked Questions about heroui-react

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install HeroUI v3 in a Next.js project?▼

Install @heroui/styles@beta, @heroui/react@beta, tailwind-variants, and Tailwind CSS v4 with its PostCSS plugin. Import tailwindcss first in globals.css, then @heroui/styles, and import the CSS in app/layout.tsx. No Provider component is needed.

What changed between HeroUI v2 and v3?▼

HeroUI v3 removes the HeroUIProvider, replaces framer-motion with CSS animations, switches from flat props to compound components like Card.Header, and requires Tailwind CSS v4 with @heroui/styles@beta instead of @heroui/theme.

Does HeroUI v3 work with Tailwind CSS v3?▼

No, Tailwind CSS v4 is mandatory for HeroUI v3. The styles package relies on Tailwind v4 features, and the import order matters: tailwindcss must be imported before @heroui/styles in your CSS file.

How do I get HeroUI component documentation and source code?▼

Run the included Node scripts: list_components.mjs lists all components, get_component_docs.mjs fetches MDX docs, get_source.mjs retrieves TSX source, get_styles.mjs gets BEM CSS, and get_theme.mjs returns theme variables. They use the HeroUI API with fallbacks.

Why should I use onPress instead of onClick in HeroUI?▼

HeroUI v3 is built on React Aria Components, which use onPress handlers for better accessibility across mouse, touch, and keyboard interactions. Using onPress ensures consistent behavior for all input modalities.

Related Skills

Explore More Software Engineering Skills→
expoexpo
2.4k

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 in Expo applications.

Official
Intermediate
mindcockpit-aimindcockpit-ai
11

react-testing

Integrate Vitest, React Testing Library, MSW v2, and Playwright for React UI testing.

Official
Advanced
viably-labsviably-labs

playwright-screenshot-inspector

Analyze Playwright screenshots to validate UI rendering accuracy semantically.

Official
Advanced
lemone112lemone112

heroui-react

Implement HeroUI v3 React components with Tailwind CSS v4 integration.

Community
Intermediate