Skills
.Work. You
Rest

heroui

Community

Build accessible UI with HeroUI v3.

Software Engineering#documentation#accessibility#react#tailwind#compound-components#heroUI
Authorruchernchong
Version1.0.0
Installs0

System Documentation

What problem does it solve?

HeroUI v3 provides a ready-to-use, accessibility-focused React UI library that simplifies building consistent, keyboard-friendly interfaces by offering compound components, Tailwind v4 integration, and React Aria-based accessibility out of the box.

Core Features & Use Cases

  • Compound component architecture (Card, Tabs, Modal, and more) that scales with your UI.
  • Tailwind CSS v4 integration with semantic theming using okLCH color tokens.
  • Accessibility-first design with keyboard navigation, ARIA attributes, and screen-reader support.
  • Use cases include building forms, navigation, overlays, data displays, and complex UIs in React apps.

Quick Start

  • Install HeroUI v3 beta packages: npm i @heroui/react@beta @heroui/styles@beta tailwind-variants
  • Add Tailwind v4 and HeroUI styles to your project per the getting-started guide.
  • Import HeroUI components and start composing with the compound pattern (Card.Header, Card.Content, etc.).

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: heroui
Download link: https://github.com/ruchernchong/claude-kit/archive/main.zip#heroui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.