HeroUI: The Modern React UI Framework You Need in 2025

In the ever-evolving React ecosystem, developers often struggle to choose the right UI library—one that is fast, accessible, modern, and developer-friendly. HeroUI, formerly known as NextUI, checks all those boxes and more. Officially rebranded in January 2025, HeroUI is quickly becoming the go-to choice for building beautiful and responsive interfaces with minimal effort.

Backed by the power of Tailwind CSS and React Aria, HeroUI offers fully accessible and composable components built with performance in mind. Whether you’re building a dashboard, a marketing site, or a SaaS product, HeroUI’s modular design and rich theming options give you complete control.

In this post, we’ll explore HeroUI’s key features, how to set it up, and why it might just be the best UI library for your next project.

What is HeroUI?

From NextUI to HeroUI

HeroUI is a beautiful, fast, and modern React UI library designed to help developers build accessible and customizable web applications. It was formerly known as NextUI, and in January 2025, it underwent a strategic rebrand to better reflect its expanded capabilities and future direction.

Built for the Future

• Powered by Tailwind CSS for utility-first styling
• Uses React Aria for fully accessible components
• Emphasizes modularity, performance, and developer ergonomics

Key Features of HeroUI

• Accessibility-first components out of the box
• Modular & fully typed for better DX and maintainability
• Beautiful defaults with customizable themes
• CLI tool for rapid scaffolding and component generation
• Performance-optimized with minimal runtime overhead

HeroUI vs Other UI Libraries

HeroUI vs Material UI

While Material UI offers a mature component ecosystem, it can feel rigid and comes with design opinions that are harder to override. HeroUI offers more flexibility through Tailwind, with less CSS bloat and faster customization.

HeroUI vs Chakra UI

Chakra UI emphasizes accessibility, like HeroUI. But HeroUI’s integration with Tailwind and its lightweight CLI tool gives it a performance edge—ideal for modern apps and frameworks like Next.js.

Migrating from NextUI to HeroUI

HeroUI is the spiritual successor to NextUI. Here’s what you need to know:

• Why the rebrand?
  To better align with Tailwind-first development and future vision.
• Package changes
  The package name has changed from @nextui-org/react to @heroui/react.
• CLI support
  A migration-friendly CLI is available to help convert existing projects with ease.

Installing HeroUI Using the CLI

The HeroUI CLI is the fastest way to get started. It handles everything from project scaffolding to component generation.

Step 1: Install the CLI (Optional)

You can install the CLI globally:

npm install -g heroui

Or use it directly via npx:

npx heroui init

Step 2: Initialize the Project

Choose your preferred package manager:

# pnpm
pnpm dlx heroui init
# npm
npx heroui init
# yarn
yarn dlx heroui init
# bun
bunx heroui init

You’ll be prompted to select:

• Project name
• Framework (React)
• Package manager
• Tailwind CSS setup

Step 3: Install Dependencies

Once the setup is complete, install the dependencies:

# pnpm
pnpm install
# npm
npm install
# yarn
yarn install
# bun
bun install

Step 4: Start the Development Server

Run your project locally:

# pnpm
pnpm dev
# npm
npm run dev
# yarn
yarn dev
# bun
bun run dev

Step 5: Add Components with the CLI

Use the CLI to add components to your project:

heroui add button

Add multiple components:

heroui add button card checkbox

Or add all available components:

heroui add --all

If you omit the component name, the CLI launches an interactive menu:

heroui add

Example prompt:

? Which components would you like to add?
◯ accordion
◯ autocomplete
◯ avatar
◯ badge
◯ breadcrumbs
◉ button
◯ card
◯ checkbox
◯ chip
◯ code

HeroUI in Action

Here are just a few components you can start using immediately:

Button Example

import { Button } from "@heroui/react";
export default function Example() {
  return <Button color="primary">Click Me</Button>;
}

Modal Example

import { Modal, useDisclosure } from "@heroui/react";
export default function ModalExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onPress={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <Modal.Content>
          <Modal.Header>Welcome</Modal.Header>
          <Modal.Body>Hello from HeroUI!</Modal.Body>
        </Modal.Content>
      </Modal>
    </>
  );
}

Final Thoughts

HeroUI brings together the best parts of Tailwind, accessibility, and developer-focused tooling in one elegant package. If you’re starting a new project in 2025 or looking to modernize an older one, HeroUI deserves a serious look.

It’s ideal for:

• React developers using Tailwind
• Teams that care about accessibility
• Projects that need speed, customization, and style

With its intuitive CLI, modular design, and commitment to best practices, HeroUI is ready for production and your next project.