skills.rest
abrahamgreyson
abrahamgreysonCOMMUNITY
Explore all skills by this author →
GitHub

heroui-react

Build HeroUI v3 React interfaces with component, theming, and documentation support.

Updated Aug 23, 2026
Search Tags:#theming#documentation#react#ui components#heroui#react aria#tailwind css v4
One-click install
npx skills add https://github.com/abrahamgreyson/skills --skill heroui-react-abrahamgreyson
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-react
Source: https://github.com/abrahamgreyson/skills/tree/main/heroui-react
Command: npx skills add https://github.com/abrahamgreyson/skills --skill heroui-react-abrahamgreyson

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers build and configure HeroUI v3 interfaces without guessing the correct component patterns, theme setup, or documentation sources.

Core Features & Use Cases

  • Component Guidance: Provides practical direction for building HeroUI buttons, modals, forms, cards, and other React UI elements.
  • Setup and Theming: Explains the required Tailwind CSS v4 integration, CSS variable theming, and light and dark mode configuration.
  • Docs and Implementation Lookup: Supports fetching component documentation, source code, styles, theme variables, and general guides on demand.
  • Use Case: A React developer can use this Skill to quickly find the right HeroUI v3 component API, apply the correct compound component structure, and confirm the proper installation and styling workflow.

Quick Start

Ask for help building a HeroUI v3 React component and include the component name, your framework setup, and any docs, source, or theme details you want retrieved.

Frequently Asked Questions about heroui-react

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

FAQPage Schema
How do I set up Tailwind CSS v4 theming with React for HeroUI v3 components?▼

To set up Tailwind CSS v4 theming with HeroUI v3, you need to configure CSS variable theming using oklch values. This approach supports light and dark mode configuration by retrieving theme variables and applying the correct @heroui/styles workflow.

What is the correct compound component structure for HeroUI v3 React UI elements?▼

The correct compound component structure for HeroUI v3 relies on importing from @heroui/react. You can retrieve source code and documentation to confirm the exact API patterns needed for building buttons, modals, and forms.

How do I fetch documentation and source code for HeroUI v3 components on demand?▼

You can fetch HeroUI v3 documentation and source code on demand using script-based retrieval. This provides practical direction for component APIs, style implementation, and theme variables directly within your React workflow.

Does HeroUI v3 work with React Aria and Tailwind CSS v4?▼

Yes, HeroUI v3 works with React Aria and Tailwind CSS v4. The framework requires @heroui/react and @heroui/styles, utilizing oklch CSS variables to ensure accessible UI components and proper styling integration.

Why are my HeroUI v3 CSS variables not applying the correct light and dark mode styles?▼

HeroUI v3 light and dark mode styles fail when CSS variables are not configured correctly. You must ensure your Tailwind CSS v4 setup uses the proper oklch color values and @heroui/styles integration for theme switching.

Related Skills

Explore More Software Engineering Skills→
memorysavermemorysaver

heroui-react

Integrate HeroUI v3 components into React apps without a provider.

Community
Intermediate
auxi-wardrobeauxi-wardrobe
1

ck:web-frameworks

Develop full-stack web applications with Next.js, Turborepo, and RemixIcon.

Official
Advanced
wilfriedagowilfriedago
2

heroui-react

Develop React applications with HeroUI v3 components and Tailwind CSS v4.

Community
Intermediate
lexand-devlexand-dev

heroui-native

Provides semantic React Native UI components styled with Uniwind Tailwind implementation.

Community
Intermediate