skills.rest
RuixeWolf
RuixeWolfCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

heroui-react

Implements HeroUI v3 React components with Tailwind CSS v4 and fetches component documentation.

4|Updated May 13, 2026
Search Tags:#theming#react#next.js#component library#tailwind css#ui development#heroui
One-click install
npx skills add https://github.com/RuixeWolf/modbus-simulator --skill heroui-react-ruixewolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-react
Source: https://github.com/RuixeWolf/modbus-simulator/tree/main/.agents/skills/heroui-react
Command: npx skills add https://github.com/RuixeWolf/modbus-simulator --skill heroui-react-ruixewolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Building UIs with HeroUI v3 requires up-to-date knowledge of its compound component API, Tailwind CSS v4 setup, and oklch-based theming, which differs significantly from v2 patterns that AI models often confuse. ## Core Features & Use Cases - Component Documentation Fetching: Retrieve MDX docs, source code, and BEM CSS styles for any HeroUI v3 component via bundled scripts. - Correct v3 Setup Guidance: Enforces Tailwind CSS v4, no-provider architecture, and compound component patterns instead of deprecated v2 approaches. - Theme Variable Access: Pull current oklch theme variables for light and dark modes to configure custom themes. - Use Case: When building a Next.js dashboard with HeroUI, use this Skill to fetch the exact Card or Modal anatomy and props before writing any JSX, avoiding v2 API mistakes. ## Quick Start Use the heroui-react skill to build a settings page with a Card, Button, and Modal using HeroUI v3.

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, @heroui/react, tailwind-variants, and Tailwind CSS v4 with its PostCSS plugin. Import tailwindcss first in globals.css, then @heroui/styles, and import the CSS file in your root layout.

What is the difference between HeroUI v2 and v3?▼

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

Does HeroUI v3 work with Tailwind CSS v3?▼

No, Tailwind CSS v4 is mandatory for HeroUI v3. The styling system relies on Tailwind v4 features and the @heroui/styles package, so v3 projects must upgrade their Tailwind setup first.

How do I get HeroUI component documentation and props?▼

Run node scripts/get_component_docs.mjs with the component name to fetch MDX documentation including examples, props, and anatomy. You can also fetch MDX directly from heroui.com/docs/react/components URLs.

How do I configure dark mode in HeroUI v3?▼

HeroUI v3 uses CSS variables in oklch color space for theming. Toggle dark mode by setting class="dark" or data-theme="dark" on the html element, and retrieve current theme variables with the get_theme.mjs script.

Related Skills

Explore More Software Engineering Skills→
lexand-devlexand-dev

expo-tailwind-setup

Configure Tailwind CSS v4 with NativeWind v5 and react-native-css in Expo projects.

Community
Intermediate
tonehqtonehq
11

generate-tests

Generate Playwright e2e specs from page component source and run them.

Official
Advanced
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
nccasianccasia

heroui-react

Provide HeroUI v3 React components with Tailwind CSS v4 for accessible UIs.

Official
Basic