Quick Start

Requirements

• React 19+
• Tailwind CSS v4

Quick Install

` from `@heroui/react` somewhere visible to confirm styles are applied.

When done, summarize the changes you made and tell me how to start the dev server.`}

Prefer to let your AI assistant do it? Install the HeroUI MCP Server in your editor, then paste the prompt into your AI assistant — it will analyze your project and handle the entire setup for you.

Install HeroUI and required dependencies:

npm

```bash
npm i @heroui/styles @heroui/react
```

pnpm

```bash
pnpm add @heroui/styles @heroui/react
```

yarn

```bash
yarn add @heroui/styles @heroui/react
```

bun

```bash
bun add @heroui/styles @heroui/react
```

Import Styles

Add to your main CSS file globals.css:

@import "tailwindcss";
@import "@heroui/styles"; /* [!code highlight]*/

Import order matters. Always import tailwindcss first.

Use Components

import { Button } from '@heroui/react';

function App() {
  return (
    <Button>
      My Button
    </Button>
  );
}

What's Next?

• Themes - Create and share your own themes
• Browse Components - See all available components
• Learn Styling - Customize with Tailwind CSS
• Explore Patterns - Master compound components