HeroUI React (heroui-inc): a Claude skill that builds interfaces with HeroUI v3 using current docs

The HeroUI React skill makes Claude build React interfaces with HeroUI v3 and look up current component docs instead of guessing from older versions.

Installs: 12.3K; on skills.sh
Stars: 31.1K; on GitHub
Files: 7; besides SKILL.md
Updated: Oct 2026; last repo commit

Ask Claude to build a button, modal, form or card with HeroUI, or to set up its theme, and this skill steers it to v3 patterns. SKILL.md says to ignore v2 knowledge: no provider, no framer-motion, compound components such as Card.Header, and Tailwind CSS v4 with @heroui/styles. Claude is told to fetch the docs for a component before it writes code.

Six bundled Node scripts do the fetching: list components, get a component's docs, source or CSS classes, read the theme variables, and read any other docs page. They call HeroUI's docs API over the network. You need Node.js to run them.

Good for

React developers building with HeroUI v3 and Tailwind CSS v4
Teams upgrading from HeroUI v2 who keep getting v2 code from their AI tool
Designers who tweak HeroUI themes with oklch color variables

Install heroui-react

Claude Code

Copy this prompt.

Install the heroui-react skill in Claude Code. Run this command:

npx skills add https://github.com/heroui-inc/heroui --skill heroui-react

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The skill runs Node scripts that fetch HeroUI docs, so the Claude app ZIP upload is not offered here. The README's own command, npx skills add heroui-inc/heroui, installs the skills in the HeroUI repo. The curl installer comes from SKILL.md and runs a script from heroui.com, so read it before you use it.

Built from the package data we hold. Not yet tested by us.

What's in the skill

When it loads

HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.

Sections in SKILL.md

Installation
CRITICAL: v3 Only - Ignore v2 Knowledge
CORRECT (v3 patterns)
Core Principles
Accessing Documentation & Component Information
Using Scripts
Direct MDX URLs
Installation Essentials
Quick Install
Framework Setup (Next.js App Router - Recommended)
Critical Setup Requirements
Component Patterns
Semantic Variants
Theming

Key facts

Author: heroui-inc (GitHub)
Repo: heroui-inc/heroui (skills/heroui-react)
License: Apache-2.0
Installs on skills.sh: 12,333 as of 2026-11-02
GitHub stars: 31,082 (whole repo) as of 2026-11-02
Last repo commit: 2026-10-31
Folder contents: 8 files including SKILL.md: 6 Node scripts and a license file
Version in SKILL.md: 3.0.1 (author: heroui)
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Lists every available HeroUI component.
Runs code · list_components.mjs
Fetches the MDX docs for one or more components.
Runs code · get_component_docs.mjs
Fetches a component's source code.
Runs code · get_source.mjs
Fetches a component's CSS and BEM class names.
Runs code · get_styles.mjs
Fetches the current theme variables.
Runs code · get_theme.mjs
Fetches guides, theming and release notes by path.
Runs code · get_docs.mjs
Tells Claude to drop v2 patterns: no provider, compound components, onPress.
v3 rules
Install, CSS import order, layout and PostCSS steps.
Next.js setup
Variant meanings and oklch CSS variables for light and dark themes.
Semantic variants and theming

From the official docs

Permissions

Low risk

The skill runs Node scripts that fetch docs from HeroUI's servers, and it tells Claude to install npm packages. Check each install command before you approve it.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

SKILL.md lists a curl-to-bash installer
Its Installation section runs `curl -fsSL https://heroui.com/install | bash -s heroui-react`. That runs a downloaded script, so read it first or use the skills CLI instead.
Scripts call HeroUI's servers
The six scripts request docs from mcp-api.heroui.com, heroui.com and GitHub, and add an app=react-skills parameter. Set HEROUI_API_BASE if you want a different address.
It tells Claude to install npm packages
The setup steps install @heroui/styles, @heroui/react and Tailwind CSS packages into your project.

Technical details

Talks to	mcp-api.heroui.com. heroui.com. raw.githubusercontent.com

Questions

What does the HeroUI React skill do?

It teaches Claude to write HeroUI v3 code. That means Tailwind CSS v4, React Aria based components, compound component patterns, semantic variants such as primary and tertiary, and theming with oklch CSS variables. It tells Claude to fetch component docs before writing code.

How do I install it?

Use the install box above. The HeroUI README gives npx skills add heroui-inc/heroui for coding agents, and the box uses the same tool for this one skill. SKILL.md also lists a curl installer from heroui.com, which pipes a script into bash. Review that script before you run it.

Does it work with HeroUI v2?

No. SKILL.md says it is for v3 only and tells Claude not to apply v2 patterns. v3 needs Tailwind CSS v4 and does not work with Tailwind CSS v3.

Does it need an API key?

No key is mentioned. The scripts call HeroUI's docs API at mcp-api.heroui.com without one. An environment variable, HEROUI_API_BASE, can point them at another address.

Is it safe?

The scripts send requests to HeroUI's servers with the component or page names Claude asks for, and add an app=react-skills parameter that the code comments call analytics. They fall back to heroui.com. Check any npm i or curl | bash command before you approve it.

What is the difference from the HeroUI MCP server?

The HeroUI README lists an MCP server, @heroui/react-mcp, and agent skills as separate tools. The skill gives Claude instructions and scripts. The MCP server is a connected tool that runs in your editor.

Which frameworks does it show setup for?

SKILL.md walks through Next.js App Router: install packages, add the Tailwind and HeroUI imports to globals.css, import it in the layout, and set up PostCSS. It says no provider is needed.

Information

updated Nov 2, 2026

Repository: heroui-inc/heroui
Folder: skills/heroui-react

heroui-inc/heroui skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3