SkillFoxx

HeroUI skill

Official HeroUI skills for React and React Native: v3 components, oklch themes and a migration path from version 2

  • 31,196 ★ on the repository
  • Last commit
  • Apache-2.0
SkillOfficialEditors’ pick

Extended access

Why this level

  • The `curl ... | bash` installer downloads and runs a script from heroui.com, and the skill scripts run through `node` and use the network.
  • A skill in the home directory affects every project of the agent, so for a single project install it at project scope.
All reasons and checks

heroui-inc/herouiAuthor:HeroUI

Install

Manual install

npx skills add heroui-inc/heroui

The command from the README. It supports Claude Code, Cursor, OpenCode and other agents.

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The `curl ... | bash` installer downloads and runs a script from heroui.com, and the skill scripts run through `node` and use the network.
  • A skill in the home directory affects every project of the agent, so for a single project install it at project scope.

This is third-party code. Review the repository files before installing.

What it does

The HeroUI repository publishes three skills. `heroui-react` teaches an agent the version 3 library built on Tailwind CSS v4 and React Aria, `heroui-native` covers React Native on Uniwind, and `heroui-migration` walks a project from version 2 to version 3. The first skill warns up front that version 2 habits no longer work: no provider, components are assembled from nested parts like `Card.Header`, and animations run on CSS without `framer-motion`. The documentation itself does not live in the skill: it is fetched from the network on each task. The scripts `list_components.mjs`, `get_component_docs.mjs`, `get_source.mjs`, `get_styles.mjs` and `get_theme.mjs` pull a component's description, source, BEM classes and theme variables from heroui.com. Before writing code the agent reads the current props and examples.

Who it is for. Frontend developers on React and React Native who build on HeroUI v3 and want the agent's code to use the current API.

Good fit when

  • An agent builds a form, a modal or a whole page from HeroUI v3 components.
  • Brand colours move into the theme through oklch variables, and dark mode switches on with the `dark` class.
  • An app on HeroUI v2 moves to v3 and the agent runs the migration across components and hooks.
  • A React Native mobile app is built on HeroUI Native.
  • The agent's suggestions include props that v3 does not have and you want them replaced by what the documentation says.

Not a fit when

  • The project uses another component library, such as shadcn/ui or Material UI.
  • The project stays on Tailwind CSS v3, which HeroUI v3 does not support.
  • Work happens offline while the skill scripts pull documentation from heroui.com.

Example request

Build a sign-in page on HeroUI v3: a two-field form, a primary button and a dark theme. Fetch the component documentation before writing code.

Limitations

The `heroui-react` skill covers HeroUI v3 only and requires Tailwind CSS v4, while `heroui-migration` is marked preview in its metadata. The scripts run through `node` and fetch MDX documentation from heroui.com, so offline the agent is left with `SKILL.md` alone. The installer writes to the home directory by default, so the skill lands in every project; to install it into one project, set `HEROUI_SKILL_SCOPE=project`. The skill's step-by-step setup is given for the Next.js App Router, so for other bundlers it has to be checked against the documentation.

How to disable. Delete the `heroui-react`, `heroui-native` and `heroui-migration` folders from the agent's skills directory. The `@heroui/react` library stays in your project.

FAQ

How do I install the HeroUI skills in Claude Code?

Run `npx skills add heroui-inc/heroui`. The skill is discovered automatically and can be called by hand with `/heroui-react`.

How does `heroui-react` differ from `heroui-native`?

`heroui-react` covers the web library on Tailwind CSS v4 and React Aria, while `heroui-native` covers the mobile one on Uniwind and React Native. The packages and props differ.

What should I do with a HeroUI v2 project?

Add `heroui-migration`. It leads to version 3: drop the provider, switch to nested components and Tailwind v4, replace removed hooks. The skill is marked `preview`.

Do I need the MCP server if I have the skill?

The skill covers typical tasks. The `@heroui/react-mcp` server serves documentation and source in real time, over stdio and only for `@heroui/react` v3. In Claude Code add it with `claude mcp add heroui-react -- npx -y @heroui/react-mcp@latest`.

How do I install the skill into a single project?

From the project root run `curl -fsSL https://heroui.com/install | HEROUI_SKILL_SCOPE=project bash -s heroui-react`. Files go to `.claude/skills/` for Claude Code, `.cursor/skills/` for Cursor and `.agents/skills/` for Codex.

Discussion

No questions or reviews yet.

Skills
Official

A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets

SkillExtended access2K

Three skills for Bklit UI charts in React: installing from the shadcn registry, styling to the app theme and moving off Recharts.

SkillExtended access2K

Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS

SkillMinimal access99.3K
Official

Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards

SkillExtended access7.1K
Official

Magic UI skill: an agent adds animated components to React and Next.js through the shadcn registry and checks accessibility

SkillExtended access23.2K
Official

A skill for React Joyride v3: guided product tours, steps, events, custom components and a guide to the usual breakages

SkillMinimal access7.9K

Comparison with similar tools

Cards that share the main search query, and how they differ.

ToolOfficialRepository starsMain difference
HeroUI (this card)yes31,196
shadcn/uino128,022the official shadcn/ui skill and MCP server, where components are copied into the project; these are skills for the HeroUI library on React Aria and Tailwind CSS v4
Material UI agent skillsno99,334four official Material UI skills on styling and themes; these cover a different library, including React Native and migration from version 2

README in short

The README presents HeroUI, formerly NextUI, as a React component library with React Aria accessibility and Tailwind CSS v4 styling and no required provider. A separate AI section lists the MCP server, `llms.txt`, `AGENTS.md` and skills, and a table compares the library with shadcn/ui, MUI, Chakra and Mantine.

README badge

Original SKILL.md

---
name: heroui-react
description: "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."
metadata:
  author: heroui
  version: "3.0.1"
---

# HeroUI v3 React Development Guide

HeroUI v3 is a component library built on **Tailwind CSS v4** and **React Aria Components**, providing accessible, customizable UI components for React applications.

---

## Installation

```bash
curl -fsSL https://heroui.com/install | bash -s heroui-react
```

---

## CRITICAL: v3 Only - Ignore v2 Knowledge

**This guide is for HeroUI v3 ONLY.** Do NOT apply v2 patterns — the provider, styling, and component API all changed:

| Feature       | v2 (DO NOT USE)                   | v3 (USE THIS)                               |
| ------------- | --------------------------------- | ------------------------------------------- |
| Provider      | `<HeroUIProvider>` required       | **No Provider needed**                      |
| Animations    | `framer-motion` package           | CSS-based, no extra deps                    |
| Component API | Flat props: `<Card title="x">`    | Compound: `<Card><Card.Header>`             |
| Styling       | Tailwind v3 + `@heroui/theme`     | Tailwind v4 + `@heroui/styles`         	  |
| Packages      | `@heroui/system`, `@heroui/theme` | `@heroui/react`, `@heroui/styles` 		  |

```tsx
// DO NOT DO THIS - v2 pattern
import { HeroUIProvider } from "@heroui/react";
import { motion } from "framer-motion";

<HeroUIProvider>
	<Card title="Product" description="A great product" />
</HeroUIProvider>;
```

### CORRECT (v3 patterns)

```tsx
// DO THIS - v3 pattern (no provider, compound components)
import { Card } from "@heroui/react";

Report a problem