Development
Plugin
heroui
🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
Plugin Signal63/100Solid
maintained99
capable46
documented1
adopted95
Install
$ npx -y skills add heroui-inc/heroui --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
30,330
Stars
2,208
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
2d ago
Last commit
5y ago
Created
Repo: heroui-inc/heroui
What's inside
Skills
3/heroui-migrationHeroUI v2 to v3 migration guide for agents. Use when migrating HeroUI v2 apps to v3, upgrading components, or accessing migration documentation. Keywords: HeroUI migration, v2 to v3, migration guide, upgrade HeroUI./heroui-nativeHeroUI Native component library for React Native (Tailwind v4 via Uniwind). Use when building mobile UIs with HeroUI Native — creating Buttons, Cards, TextFields, Dialogs; installing heroui-native; configuring dark/light themes; or fetching component docs. Keywords: HeroUI/heroui-reactHeroUI 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,
Agents
5docs-curatorUse this agent when you need to review, improve, or curate documentation files in the /apps/docs/content directory. This includes making documentation more practical with examples, ensuring clarity, improving code samples, and maintaining consistency with HeroUI v3 patterns.heroui-docs-writerUse this agent when you need to create or update technical documentation for HeroUI v3 components, features, or guides. This includes component API documentation, usage examples, installation guides, migration guides, and conceptual explanations. The agent follows HeroUI'sstorybook-debuggerUse this agent when you need to debug and fix issues in the HeroUI Storybook development environment, particularly CSS transformation errors, Tailwind CSS v4 compatibility issues, or component styling problems. This includes investigating build errors, runtime errors in thestyle-migratorUse this agent when you need to migrate HeroUI components from TypeScript-based styles (.styles.ts files using tailwind-variants) to CSS-based styles (.css files) following the BEM naming convention. This includes converting tv() configurations to CSS classes, maintainingtailwind-v4-css-expertUse this agent when you need to analyze, create, modify, or debug Tailwind CSS v4 component CSS files. This includes identifying issues with existing CSS files, suggesting improvements, migrating styles to v4 patterns, or helping other agents (like storybook-debugger and
README
1packages/react/README.md
File tree
1711heroui-inc/herouiView on GitHub
.claude/
agents/
docs-curator.md
heroui-docs-writer.md
storybook-debugger.md
style-migrator.md
tailwind-v4-css-expert.md
guides/
tailwindcss-v4-css-guide.md
hooks.mjs
.editorconfig
.github/
CODEOWNERS
common-actions/
install/
action.yml
FUNDING.yml
ISSUE_TEMPLATE/
bug_report.yml
config.yml
pull_request_template.md
workflows/
QA.yaml
release.yml
trigger-mcp-extraction.yml
update-stats.yml
.gitignore
.husky/
commit-msg
post-merge
post-rebase
pre-commit
scripts/
pnpm-install
.npmrc
.nvmrc
.prettierignore
.vscode/
extensions.json
settings.json
AGENTS.md
apps/
docs/
.env.example
.npmrc
content/
blog/
cn/
best-react-ui-component-libraries.mdx
why-choose-heroui-for-your-design-system.mdx
en/
best-react-dashboards.mdx
best-react-ui-component-libraries.mdx
build-react-dashboard-with-heroui.mdx
choosing-react-native-ui-library.mdx
design-to-code-with-heroui-native.mdx
heroui-vs-chakra-ui.mdx
heroui-vs-mantine.mdx
heroui-vs-mui.mdx
heroui-vs-shadcn.mdx
react-component-library-comparison.mdx
styling-and-theming-in-heroui-native.mdx
what-is-a-design-system.mdx
why-choose-heroui-for-your-design-system.mdx
docs/
cn/
meta.json
native/
components/
(buttons)/
button.mdx
close-button.mdx
link-button.mdx
(collections)/
menu.mdx
tag-group.mdx
(controls)/
slider.mdx
switch.mdx
(data-display)/
chip.mdx
(feedback)/
alert.mdx
skeleton-group.mdx
skeleton.mdx
spinner.mdx
(forms)/
checkbox.mdx
control-field.mdx
description.mdx
field-error.mdx
input-group.mdx
input-otp.mdx
input.mdx
label.mdx
radio-group.mdx
search-field.mdx
select.mdx
text-area.mdx
text-field.mdx
(layout)/
card.mdx
separator.mdx
surface.mdx
(media)/
avatar.mdx
(navigation)/
accordion.mdx
list-group.mdx
tabs.mdx
(overlays)/
bottom-sheet.mdx
dialog.mdx
popover.mdx
toast.mdx
(typography)/
text.mdx
(utilities)/
pressable-feedback.mdx
scroll-shadow.mdx
index.mdx
meta.json
getting-started/
(handbook)/
animation.mdx
colors.mdx
composition.mdx
portal.mdx
provider.mdx
styling.mdx
theming.mdx
(overview)/
design-principles.mdx
quick-start.mdx
(ui-for-agents)/
agent-skills.mdx
agents-md.mdx
llms-txt.mdx
mcp-server.mdx
index.mdx
meta.json
meta.json
releases/
beta-10.mdx
beta-11.mdx
beta-12.mdx
beta-13.mdx
cli-v1-0-0.mdx
index.mdx
meta.json
rc-1.mdx
rc-2.mdx
rc-3.mdx
rc-4.mdx
v1-0-0.mdx
v1-0-1.mdx
v1-0-2.mdx
v1-0-3.mdx
v1-0-4.mdx
v1-0-5.mdx
v1-0-6.mdx
v1-0-7.mdx
v1-0-8.mdx
react/
components/
(buttons)/
button-group.mdx
button.mdx
close-button.mdx
toggle-button-group.mdx
toggle-button.mdx
(collections)/
dropdown.mdx
list-box.mdx
tag-group.mdx
(colors)/
color-area.mdx
color-field.mdx
color-picker.mdx
color-slider.mdx
color-swatch-picker.mdx
color-swatch.mdx
(controls)/
slider.mdx
switch.mdx
(data-display)/
badge.mdx
chip.mdx
table.mdx
(date-and-time)/
calendar.mdx
date-field.mdx
date-picker.mdx
date-range-picker.mdx
range-calendar.mdx
time-field.mdx
(feedback)/
alert.mdx
meter.mdx
progress-bar.mdx
progress-circle.mdx
skeleton.mdx
spinner.mdx
(forms)/
checkbox-group.mdx
checkbox.mdx
description.mdx
error-message.mdx
field-error.mdx
fieldset.mdx
form.mdx
input-group.mdx
input-otp.mdx
input.mdx
label.mdx
number-field.mdx
radio-group.mdx
search-field.mdx
text-area.mdx
text-field.mdx
(layout)/
card.mdx
separator.mdx
surface.mdx
toolbar.mdx
(media)/
avatar.mdx
(navigation)/
accordion.mdx
breadcrumbs.mdx
disclosure-group.mdx
disclosure.mdx
link.mdx
pagination.mdx
tabs.mdx
(overlays)/
alert-dialog.mdx
drawer.mdx
modal.mdx
popover.mdx
toast.mdx
tooltip.mdx
(pickers)/
autocomplete.mdx
combo-box.mdx
select.mdx
(typography)/
kbd.mdx
typography.mdx
(utilities)/
scroll-shadow.mdx
index.mdx
meta.json
getting-started/
(handbook)/
animation.mdx
colors.mdx
composition.mdx
dark-mode.mdx
styling.mdx
theming.mdx
(overview)/
cli.mdx
design-principles.mdx
frameworks.mdx
quick-start.mdx
(ui-for-agents)/
agent-skills.mdx
agents-md.mdx
llms-txt.mdx
mcp-server.mdx
index.mdx
meta.json
meta.json
migration/
(components)/
accordion.mdx
alert.mdx
autocomplete.mdx
avatar.mdx
badge.mdx
breadcrumbs.mdx
button-group.mdx
button.mdx
calendar.mdx
card.mdx
checkbox-group.mdx
checkbox.mdx
chip.mdx
circular-progress.mdx
code.mdx
date-picker.mdx
date-range-picker.mdx
dateinput.mdx
divider.mdx
drawer.mdx
dropdown.mdx
form.mdx
image.mdx
input-otp.mdx
input.mdx
kbd.mdx
link.mdx
listbox.mdx
modal.mdx
navbar.mdx
numberinput.mdx
pagination.mdx
popover.mdx
progress.mdx
radio-group.mdx
radio.mdx
range-calendar.mdx
scroll-shadow.mdx
select.mdx
skeleton.mdx
slider.mdx
snippet.mdx
spacer.mdx
spinner.mdx
switch.mdx
table.mdx
tabs.mdx
timeinput.mdx
toast.mdx
tooltip.mdx
user.mdx
(migration-for-agents)/
agent-skills.mdx
agents-md.mdx
mcp-server.mdx
(workflows)/
agent-guide-full.mdx
agent-guide-incremental.mdx
full-migration.mdx
incremental-migration.mdx
agent-index.mdx
hooks.mdx
index.mdx
meta.json
styling.mdx
releases/
index.mdx
meta.json
v3-0-0-alpha-32.mdx
v3-0-0-alpha-33.mdx
v3-0-0-alpha-34.mdx
v3-0-0-alpha-35.mdx
v3-0-0-beta-1.mdx
v3-0-0-beta-2.mdx
v3-0-0-beta-3.mdx
v3-0-0-beta-4.mdx
v3-0-0-beta-6.mdx
v3-0-0-beta-7.mdx
v3-0-0-beta-8.mdx
v3-0-0-rc-1.mdx
v3-0-0.mdx
v3-0-2.mdx
v3-0-3.mdx
v3-0-4.mdx
v3-0-5.mdx
v3-1-0.mdx
v3-2-0.mdx
v3-2-1.mdx
v3-2-2.mdx
v3-2-3.mdx
v3-2-4.mdx
en/
meta.json
native/
components/
(buttons)/
button.mdx
close-button.mdx
link-button.mdx
(collections)/
menu.mdx
tag-group.mdx
(controls)/
slider.mdx
switch.mdx
(data-display)/
chip.mdx
(feedback)/
alert.mdx
skeleton-group.mdx
skeleton.mdx
spinner.mdx
(forms)/
checkbox.mdx
control-field.mdx
description.mdx
field-error.mdx
input-group.mdx
input-otp.mdx
input.mdx
label.mdx
radio-group.mdx
search-field.mdx
select.mdx
... 1600 moreShowing a partial view of a very large repo.
FAQ
heroui is a Claude Code plugin with 3 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes heroui-migration, heroui-native, heroui-react. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is heroui?
- 🚀 Beautiful, fast and modern React UI library. (Previously NextUI)
- How do I install heroui?
- Run these in Claude Code: npx -y skills add heroui-inc/heroui --agent claude-code. Then prompt normally.
- Does heroui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is heroui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.