# Quick Start · HeroUI

> Get started with HeroUI v3 in minutes

- Page: https://jiguang132.com/systems/heroui/docs/getting-started/quick-start
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Requirements

- [React 19+](https://reactjs.org/)
- [Tailwind CSS v4](https://tailwindcss.com/docs/installation/framework-guides)

## 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](/systems/heroui/docs/getting-started/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`:

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


> 
  Import order matters. Always import `tailwindcss` first.


## Use Components

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

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

## What's Next?

- [Themes](https://heroui.com/themes) - Create and share your own themes
- [Browse Components](/systems/heroui/docs/components) - See all available components
- [Learn Styling](/systems/heroui/docs/getting-started/styling) - Customize with Tailwind CSS
- [Explore Patterns](/systems/heroui/docs/getting-started/composition) - Master compound components

---

Index of all JGuang resources: https://jiguang132.com/llms.txt