# Fumadocs UI (the default theme of Fumadocs): Steps
URL: /ja/docs/ui/components/steps
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/components/steps.ja.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>