Steps

Some text here

Some text here

Some text here

Install to your codebase

Easier customization & control.

npx @fumadocs/cli@latest add steps

使い方

各ステップを Steps コンテナの中に配置します。

content.mdx

import { Step, Steps } from 'fumadocs-ui/components/steps';

<Steps>
<Step>

### Hello World

</Step>

<Step>

### Hello World

</Step>
</Steps>

Tailwind CSS のユーティリティは、インポートしなくても使用できます。

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

任意のバリアント (arbitrary variants) を使用すると、見出しにのみステップのスタイルを適用できます。

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

### Hello World

</div>

<Step /> コンポーネントを使わずにレンダリングしています。