HeyBinyang
← Back to open source
·UI·UI

HeroUI

Website ↗GitHub

HeroUI is the modern UI library for web and mobile, built to help you move fast, stay consistent, and deliver delightful user experiences.

Why HeroUI?

HeroUI (previously NextUI) is a production-ready React component library that combines the accessibility rigor of React Aria with the utility-first styling of Tailwind CSS v4. It ships a clean compound component API (Card.Header, Card.Content, Select.Item, …), requires no <Provider> wrapper, and works out of the box with React 19 and Next.js.

  • Accessible by default — Built on React Aria for WCAG-compliant keyboard, focus, and screen-reader behavior

  • Tailwind CSS v4 — Modern engine, no CSS-in-JS runtime, smaller output, faster builds

  • Compound components — Composable API (Card.Header, Card.Content) instead of deeply nested props

  • Zero boilerplate — No Provider wrapper needed (unlike Chakra, MUI)

  • AI-native — MCP server, llms.txt, and agent skills so AI assistants understand your components

  • Battle-tested — Previously known as NextUI, trusted by thousands of production apps

Getting Started

Visit heroui.com/docs/react/getting-started/quick-start to get started with HeroUI.

npm install @heroui/react

Who Is This For?

HeroUI is a good fit if you are building:

  • SaaS applications — forms, tables, overlays, and notifications out of the box

  • Dashboards & admin panels — data-dense layouts with consistent design tokens

  • E-commerce storefronts — performant, accessible, SEO-friendly components

  • Marketing sites & landing pages — polished UI without a heavyweight runtime

  • Any React / Next.js project that values design quality and accessibility

AI-Powered Development

HeroUI is built for the AI-assisted development workflow.

Tool

What it does

MCP Server (@heroui/react-mcp)

Components that understand your theme — install the server in Cursor, Claude Code, Windsurf, or any MCP-compatible editor

llms.txt

Available at heroui.com/llms.txt — structured context for LLMs about every component

Agent Skills

Run npx heroui-cli agents-md to install skills for Cursor, Claude Code, and more

Works with Cursor, Claude Code, Windsurf, GitHub Copilot, and any tool that supports MCP or llms.txt.

Compared To

Library

How HeroUI differs

shadcn/ui

HeroUI is batteries-included with a consistent design system; shadcn is copy-paste-customize

MUI

HeroUI is lighter, Tailwind-native, no CSS-in-JS runtime overhead

Chakra UI

HeroUI uses React Aria (stronger a11y primitives) and Tailwind v4 (better perf)

Mantine

HeroUI has AI tooling (MCP, llms.txt), Tailwind-first styling

Share

XRedditFacebookInstagramLinkedIn