skills.rest
babually
babuallyCOMMUNITY
Explore all skills by this author →
GitHub

heroui-react

Guide HeroUI v3 React component implementation with Tailwind CSS v4 and React Aria.

1|Updated Jun 27, 2026
Search Tags:#theming#accessibility#react#ui development#component docs#heroui#tailwind css v4
One-click install
npx skills add https://github.com/babually/bongo-template --skill heroui-react-babually
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: heroui-react
Source: https://github.com/babually/bongo-template/tree/main/.agents/skills/heroui-react
Command: npx skills add https://github.com/babually/bongo-template --skill heroui-react-babually

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you build accessible, themeable React interfaces with HeroUI v3 without relying on outdated v2 patterns or guessing component APIs.

Core Features & Use Cases

  • Component Guidance: Use the correct HeroUI v3 patterns for Buttons, Cards, Forms, Modals, and other UI components.
  • Documentation Lookup: Fetch component docs, source code, styles, and theme variables on demand for accurate implementation.
  • Theming and Setup: Configure Tailwind CSS v4, oklch-based design tokens, and light/dark theme variables correctly.
  • Use Case: A developer needs to add a modal and matching theme tokens to a React app and uses this Skill to retrieve the right docs and implementation details before coding.

Quick Start

Ask for the HeroUI v3 docs and implementation guidance for the component you want to build, then apply the returned API, styling, and theming instructions exactly.

Frequently Asked Questions about heroui-react

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

FAQPage Schema
How do I implement HeroUI v3 React components without using deprecated v2 APIs?▼

To implement HeroUI v3 React components correctly, fetch the on-demand component documentation, source code, and styles to apply the current API patterns. This approach ensures you avoid outdated v2 provider patterns and build accessible interfaces accurately.

What is the best way to configure Tailwind CSS v4 theming with HeroUI v3?▼

The best way to configure Tailwind CSS v4 theming for HeroUI v3 is by retrieving the oklch-based design tokens and light/dark theme variables. This ensures your React interface uses the correct styling architecture for accessible UI components.

How do I add accessible modals and forms using React Aria and HeroUI?▼

Adding accessible modals and forms with HeroUI involves retrieving the specific component documentation and source code. You apply the returned React Aria patterns and HeroUI v3 implementation details directly to ensure full accessibility compliance.

Does HeroUI v3 work with oklch-based design tokens for light and dark themes?▼

Yes, HeroUI v3 works with oklch-based design tokens to configure light and dark theme variables. Fetching the theme setup documentation ensures you apply the correct Tailwind CSS v4 token architecture for your React application.

Why does my HeroUI component styling break when migrating from v2 to v3?▼

HeroUI component styling often breaks during migration because v3 deprecates older v2 APIs and provider patterns. Fetching the updated HeroUI v3 source code, styles, and theme variables ensures your React components follow the correct Tailwind CSS v4 architecture.

Related Skills

Explore More Software Engineering Skills→
Shaarav4795Shaarav4795

tailwind-theme-builder

Generate CSS-variable themes for Tailwind v4 with shadcn/ui in React.

Community
Intermediate
htafollahtafolla
5

framework-compliance-audit

Audit and validate framework compliance with detailed audit reports.

Community
Intermediate
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic
wilfriedagowilfriedago
2

heroui-react

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

Community
Intermediate