skills.rest
NarixHine
NarixHineCOMMUNITY
Explore all skills by this author →
GitHub

heroui-react

Builds React UIs with HeroUI v3 components, Tailwind CSS v4, and oklch theming.

Updated Jul 8, 2026
Search Tags:#theming#react#next.js#component library#tailwind css#ui development#heroui
One-click install
npx skills add https://github.com/NarixHine/uni-chem --skill heroui-react-narixhine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-react
Source: https://github.com/NarixHine/uni-chem/tree/main/.agents/skills/heroui-react
Command: npx skills add https://github.com/NarixHine/uni-chem --skill heroui-react-narixhine

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, and new packages—so outdated knowledge produces broken code. This Skill supplies correct v3 patterns and fetches live component documentation, source code, styles, and theme variables on demand. ## Core Features & Use Cases - v3-Correct Implementation Guidance: Enforces compound component patterns (e.g., Card.Header, Card.Title), semantic variants, onPress handlers, and the no-provider architecture. - Live Documentation Fetching: Scripts retrieve component MDX docs, TypeScript source, BEM CSS styles, and oklch theme variables from the HeroUI API with GitHub fallbacks. - Setup & Theming Support: Covers Next.js App Router installation, PostCSS configuration, CSS import order, and dark/light theme switching via data-theme attributes. - Use Case: Ask for a settings page with a Modal and Form; the Skill fetches the latest Modal and Form docs, then generates accessible compound-component code styled with semantic variants. ## Quick Start Ask the assistant to build a HeroUI v3 card component with a header, description, and primary action button for a Next.js app.

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, tailwindcss, and @tailwindcss/postcss via npm. Import tailwindcss then @heroui/styles in globals.css, configure PostCSS with @tailwindcss/postcss, and render children directly in the root layout without any provider.

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 moves from Tailwind v3 with @heroui/theme to Tailwind v4 with @heroui/styles.

Does HeroUI v3 work with Tailwind CSS v3?▼

No, Tailwind CSS v4 is mandatory for HeroUI v3. The styling system relies on Tailwind v4's CSS-first configuration and oklch color variables, so v3 projects must upgrade Tailwind before installing @heroui/styles.

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

Run node scripts/get_component_docs.mjs Button for MDX docs, get_source.mjs for TypeScript source, get_styles.mjs for BEM CSS, and get_theme.mjs for theme variables. Scripts query the HeroUI API first and fall back to heroui.com or GitHub raw files.

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

HeroUI v3 is built on React Aria Components, which use onPress for better accessibility across mouse, touch, and keyboard interactions. Using onPress ensures consistent behavior for screen readers and non-pointer input devices.

How do I configure dark mode in HeroUI v3?▼

Set class="dark" and data-theme="dark" on the html element to activate dark mode. Theme colors are defined as oklch CSS variables like --accent and --background, with -foreground suffixed variables controlling text colors.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
Cure-Consulting-GroupCure-Consulting-Group
1

ci-cd-pipeline

Generate GitHub Actions workflows for multi-platform build, test, and deploy stages.

Official
Advanced
blueprintuiblueprintui
335

testing-visual

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

Official
Intermediate
AmidVoshakulAmidVoshakul

radix-ui-design-system

Build accessible design systems with Radix UI headless primitives.

Community
Advanced