# 快速入门 · HeroUI

> 只需几分钟即可开始使用 HeroUI v3

- 页面: https://jiguang132.com/zh/systems/heroui/docs/getting-started/quick-start
- 改编自: HeroUI 文档 (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## 环境要求

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

## 快速安装

\` 作为最小冒烟测试，确认样式已正确生效。

完成后，请总结你做出的变更，并告诉我如何启动开发服务器。`}
>
  **想让 AI 助手代劳？** 在你的编辑器中安装 [HeroUI MCP Server](/systems/heroui/docs/getting-started/mcp-server)，然后把上面的提示词粘贴给 AI 助手——它会分析你的项目并自动完成全部配置。


安装 HeroUI 及其所需依赖：


  

#### 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
    ```
  


## 导入样式

将以下内容添加到你的主 CSS 文件 `globals.css`：

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


> 
  导入顺序很重要。请务必先导入 `tailwindcss`。


## 使用组件

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

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

## 下一步

- [主题](https://heroui.com/themes) — 创建并分享你自己的主题
- [浏览组件](/systems/heroui/docs/components) — 查看所有可用的组件
- [学习样式](/systems/heroui/docs/getting-started/styling) — 使用 Tailwind CSS 进行自定义
- [探索组合模式](/systems/heroui/docs/getting-started/composition) — 掌握复合组件

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt