# Fumadocs UI (the default theme of Fumadocs): 步驟
URL: /zh-TW/docs/ui/components/steps
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/steps.zh-TW.mdx

在您的文件中加入步驟

Install to your codebase:

```bash
npx @fumadocs/cli@latest add steps
```

## 使用方式 [#usage]

請將步驟放入 `Steps` 容器中。

```mdx title="content.mdx"
import { Step, Steps } from 'fumadocs-ui/components/steps';

<Steps>
<Step>

### Hello World

</Step>

<Step>

### Hello World

</Step>
</Steps>
```

### 不使用匯入 [#without-imports]

您可以直接使用 Tailwind CSS 工具類別，不需要另外匯入。

```mdx
<div className="fd-steps">
  <div className="fd-step" />
</div>
```

它也支援透過任意變體 (arbitrary variants) ，只為標題套用步驟樣式。

```mdx
<div className='fd-steps [&_h3]:fd-step'>

### Hello World

</div>
```

<div className="fd-steps [&_h3]:fd-step">
  ### Hello World [#hello-world]

  未使用 `<Step />` 元件即已渲染。
</div>