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 i @heroui/styles @heroui/react

pnpm add @heroui/styles @heroui/react

yarn add @heroui/styles @heroui/react

bun add @heroui/styles @heroui/react

Import Styles

Add to your main CSS file globals.css:

@import "tailwindcss";
@import "@heroui/styles";

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

Quick Start

Requirements

Quick Install

Import Styles

Use Components

What's Next?

On this page