Repolode
Submit
heroui-inc

heroui-inc/heroui

A React UI component library built on React Aria and Tailwind CSS v4, formerly known as NextUI.

View on GitHubWebsite
Stars
30,968
Forks
2,237
Open issues
24
Last commit
2 days ago

What is it?

HeroUI is a React component library that pairs the accessibility primitives of React Aria with Tailwind CSS v4 styling. It offers a compound component API such as Card.Header and Select.Item, and it does not require a Provider wrapper around the app. It works with React 19 and Next.js, and components can be installed as one full bundle or imported individually for tree-shaking.

The library is aimed at product teams building SaaS dashboards, admin panels, storefronts, and marketing sites in React. Styling is handled by Tailwind with no CSS-in-JS runtime, and a separate styles package provides the theme on its own. The project also includes an MCP server, an llms.txt file, and agent skills for AI coding assistants such as Cursor and Claude Code.

HeroUI is the v3 successor to NextUI. Version 2 remains available on its own documentation site for existing projects.

Key features

  • 01Built on React Aria for keyboard, focus, and screen-reader behavior
  • 02Styled with Tailwind CSS v4 without a CSS-in-JS runtime
  • 03Compound component API such as Card.Header and Select.Item
  • 04No Provider wrapper required; works with React 19 and Next.js
  • 05Per-component packages for tree-shaking, plus a standalone styles package
  • 06MCP server, llms.txt, and agent skills for AI coding assistants

Use cases

  • Building a SaaS application with forms, tables, overlays, and notifications
  • Creating an admin dashboard with consistent design tokens
  • Developing a Next.js marketing site or landing page with accessible components
  • Migrating a NextUI project to the v3 API

Quick start

  1. 1

    Visit the HeroUI quick-start docs

  2. 2

    Install the styles and React component packages

    npm install @heroui/styles @heroui/react

Things to know

  • Documentation for the current v3 release is still evolving, and the README points to a separate v2 site for older versions.

Topics

#react#component-library#tailwind-css#accessibility#ui-components#nextjs#typescript#components#library#reactjs

FAQ

What is heroui?
A React UI component library built on React Aria and Tailwind CSS v4, formerly known as NextUI. HeroUI is a React component library that pairs the accessibility primitives of React Aria with Tailwind CSS v4 styling. It offers a compound component API such as Card.Header and Select.Item, and it does not require a Provider wrapper around the app. It works with React 19 and Next.js, and components can be installed as one full bundle or imported individually for tree-shaking.
Is heroui free to use? What license does it have?
heroui is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is heroui still maintained?
Actively maintained. The last commit to heroui was on Oct 18, 2026.
What can I use heroui for?
Building a SaaS application with forms, tables, overlays, and notifications Creating an admin dashboard with consistent design tokens Developing a Next.js marketing site or landing page with accessible components Migrating a NextUI project to the v3 API
How do I install heroui?
Visit the HeroUI quick-start docs Install the styles and React component packages: npm install @heroui/styles @heroui/react
Where can I get heroui?
The source code and installation instructions are on GitHub: https://github.com/heroui-inc/heroui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects