# HeroUI — Beautiful Fast Modern React UI Library

> A polished React component library (formerly NextUI) built on Tailwind CSS and React Aria for accessible, themeable interfaces.

## Install

Save in your project root:

# HeroUI — Beautiful Fast Modern React UI Library

## Quick Use
```bash
npm install @heroui/react framer-motion
```
```jsx
import { HeroUIProvider, Button } from '@heroui/react'
function App() {
  return (
    <HeroUIProvider>
      <Button color="primary">Click me</Button>
    </HeroUIProvider>
  )
}
```

## Introduction
HeroUI (previously NextUI) is a React component library that combines Tailwind CSS utility classes with React Aria accessibility primitives. It provides a set of styled, accessible components out of the box while allowing deep customization through Tailwind's design-token system. The library targets modern React applications using Server Components and client-side rendering alike.

## What HeroUI Does
- Ships 50+ pre-built components: buttons, modals, tables, date pickers, autocomplete, and more
- Provides built-in dark mode and custom theming via CSS variables and Tailwind presets
- Uses React Aria under the hood for WCAG-compliant keyboard navigation and screen reader support
- Supports individual package imports to keep bundle size minimal
- Integrates with Framer Motion for smooth enter/exit animations

## Architecture Overview
HeroUI is a monorepo of scoped packages, each exporting one or more components. Styling is handled by Tailwind Variants, a utility that generates class combinations from variant definitions. Accessibility logic comes from Adobe's React Aria hooks, which manage focus, ARIA attributes, and keyboard interactions. Components are fully tree-shakeable and SSR-compatible.

## Self-Hosting & Configuration
- Install the full package or individual component packages like @heroui/button
- Wrap your app in HeroUIProvider and add the heroui plugin to tailwind.config.js
- Customize the theme by overriding color tokens, border radii, and font families in the Tailwind config
- Use the CLI command `npx heroui-cli add [component]` to scaffold specific components
- Supports Next.js App Router, Remix, Vite, and other React meta-frameworks

## Key Features
- Tailwind CSS-native: every component is styled with utility classes you can override inline
- Granular package imports keep production bundles under control
- Built-in form validation integration with React Hook Form and native constraint APIs
- Responsive by default with mobile-first breakpoint variants
- Active maintenance with regular releases and a migration path from NextUI v2

## Comparison with Similar Tools
- **shadcn/ui** — copy-paste components using Radix + Tailwind; HeroUI provides installable packages with React Aria
- **Material UI (MUI)** — larger ecosystem with Material Design opinions; HeroUI is lighter and Tailwind-native
- **Radix UI** — unstyled primitives only; HeroUI ships fully styled components
- **Ant Design** — enterprise-oriented with its own design language; HeroUI is more customizable via Tailwind
- **Chakra UI** — runtime CSS-in-JS; HeroUI uses Tailwind for zero-runtime styling

## FAQ
**Q: Is HeroUI the same as NextUI?**
A: Yes. The project rebranded from NextUI to HeroUI to avoid confusion with Next.js.

**Q: Can I use HeroUI without Tailwind CSS?**
A: Tailwind is required. The component styles are generated through the Tailwind plugin.

**Q: Does it support server components?**
A: Interactive components need the "use client" directive. Static layout components work in server components.

**Q: How large is the bundle?**
A: Individual component packages range from 2-15 KB gzipped. Importing only what you need keeps the total small.

## Sources
- https://github.com/heroui-inc/heroui
- https://heroui.com

---
Source: https://tokrepo.com/en/workflows/asset-049d7854
Author: AI Open Source