---
title: Steps
description: "`Steps` is a component that displays the progress of a multi-step process."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/steps/steps.style.ts.
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/steps
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-steps--basic
---

```tsx
const items = useMemo<Steps.Item[]>(
  () => [
    {
      content:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。",
      description: "レッドリボン軍",
      title: "孫悟空少年編",
    },
    {
      content:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。闘いの後、悟空はピッコロ大魔王に殺された神龍や仲間たちの復活のため天界へ向かい、ドラゴンボールの創造者である神に会う。そこで神龍復活の条件として、神の下で天界で修行することとなった。",
      description: "ピッコロ大魔王",
      title: "ピッコロ大魔王編",
    },
    {
      content:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒すが、約1年後にはさらに強力なサイヤ人たちがドラゴンボールを求めて地球に来襲することを知る。",
      description: "ベジータ・ナッパ",
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <Steps.Root items={items}>
    <Steps.List />
    <Steps.Contents />
    <Steps.CompletedContent>
      地球の神と殺された仲間たちを甦らせるため、重傷で入院中の悟空に代わり、悟飯、クリリン、ブルマの3人が神とピッコロの故郷であるナメック星へ向かう。だが、そこには地球で闘ったベジータや、界王すら畏怖する宇宙の帝王・フリーザとその一味が不老不死を求めて来襲し、ナメック星人を虐殺しながらドラゴンボールを略奪していた。悟飯たちはベジータ、フリーザ一味とのドラゴンボールをめぐる三つ巴の攻防の末、後から到着した悟空とナメック星人たちの協力を得てナメック星の神龍・ポルンガを呼び出し、ピッコロと地球のドラゴンボールを復活させる。
    </Steps.CompletedContent>

    <ButtonGroup.Root>
      <Steps.PrevTrigger>
        <ButtonGroup.Item>Prev</ButtonGroup.Item>
      </Steps.PrevTrigger>
      <Steps.NextTrigger>
        <ButtonGroup.Item>Next</ButtonGroup.Item>
      </Steps.NextTrigger>
    </ButtonGroup.Root>
  </Steps.Root>
)
```

## Usage

```tsx
import { Steps } from "@yamada-ui/react"
```

```tsx
import { Steps } from "@/components/ui"
```

```tsx
import { Steps } from "@workspaces/ui"
```

```tsx
<Steps.Root>
  <Steps.List>
    <Steps.Item>
      <Steps.Indicator />
      <Steps.Title />
      <Steps.Description />
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>
  <Steps.Contents>
    <Steps.Content />
  </Steps.Contents>
  <Steps.CompletedContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>
```

### Use items

```tsx
const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <Steps.Root items={items}>
    <Steps.List />
  </Steps.Root>
)
```

### Change variant

```tsx
const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <VStack>
    <For each={["solid", "subtle"]}>
      {(variant) => (
        <Steps.Root
          key={variant}
          variant={variant}
          colorScheme="success"
          defaultIndex={1}
          items={items}
        >
          <Steps.List />
        </Steps.Root>
      )}
    </For>
  </VStack>
)
```

### Change size

```tsx
const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <VStack>
    <For each={["sm", "md", "lg"]}>
      {(size) => (
        <Steps.Root key={size} size={size} defaultIndex={1} items={items}>
          <Steps.List />
        </Steps.Root>
      )}
    </For>
  </VStack>
)
```

### Change orientation

```tsx
const items = useMemo<Steps.Item[]>(
  () => [
    {
      content:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。",
      description: "レッドリボン軍",
      title: "孫悟空少年編",
    },
    {
      content:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちが殺される。",
      description: "ピッコロ大魔王",
      title: "ピッコロ大魔王編",
    },
    {
      content:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲。",
      description: "ベジータ・ナッパ",
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <VStack>
    <Steps.Root items={items} orientation="horizontal">
      <Steps.List />
      <Steps.Contents />
      <Steps.CompletedContent>
        地球の神と殺された仲間たちを甦らせるため、重傷で入院中の悟空に代わり、悟飯、クリリン、ブルマの3人が神とピッコロの故郷であるナメック星へ向かう。だが、そこには地球で闘ったベジータや、界王すら畏怖する宇宙の帝王・フリーザとその一味が不老不死を求めて来襲し、ナメック星人を虐殺しながらドラゴンボールを略奪していた。悟飯たちはベジータ、フリーザ一味とのドラゴンボールをめぐる三つ巴の攻防の末、後から到着した悟空とナメック星人たちの協力を得てナメック星の神龍・ポルンガを呼び出し、ピッコロと地球のドラゴンボールを復活させる。
      </Steps.CompletedContent>

      <ButtonGroup.Root>
        <Steps.PrevTrigger>
          <ButtonGroup.Item>Prev</ButtonGroup.Item>
        </Steps.PrevTrigger>
        <Steps.NextTrigger>
          <ButtonGroup.Item>Next</ButtonGroup.Item>
        </Steps.NextTrigger>
      </ButtonGroup.Root>
    </Steps.Root>

    <Steps.Root h="lg" items={items} orientation="vertical">
      <Steps.List />
      <VStack flex="1">
        <Steps.Contents />
        <Steps.CompletedContent>
          地球の神と殺された仲間たちを甦らせるため、重傷で入院中の悟空に代わり、悟飯、クリリン、ブルマの3人が神とピッコロの故郷であるナメック星へ向かう。だが、そこには地球で闘ったベジータや、界王すら畏怖する宇宙の帝王・フリーザとその一味が不老不死を求めて来襲し、ナメック星人を虐殺しながらドラゴンボールを略奪していた。悟飯たちはベジータ、フリーザ一味とのドラゴンボールをめぐる三つ巴の攻防の末、後から到着した悟空とナメック星人たちの協力を得てナメック星の神龍・ポルンガを呼び出し、ピッコロと地球のドラゴンボールを復活させる。
        </Steps.CompletedContent>
        <ButtonGroup.Root>
          <Steps.PrevTrigger>
            <ButtonGroup.Item>Prev</ButtonGroup.Item>
          </Steps.PrevTrigger>
          <Steps.NextTrigger>
            <ButtonGroup.Item>Next</ButtonGroup.Item>
          </Steps.NextTrigger>
        </ButtonGroup.Root>
      </VStack>
    </Steps.Root>
  </VStack>
)
```

### Enable lazy rendering

```tsx
const items = useMemo<Steps.Item[]>(
  () => [
    {
      content:
        "地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。",
      description: "レッドリボン軍",
      title: "孫悟空少年編",
    },
    {
      content:
        "天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちが殺される。",
      description: "ピッコロ大魔王",
      title: "ピッコロ大魔王編",
    },
    {
      content:
        "ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに実兄・ラディッツが来襲。",
      description: "ベジータ・ナッパ",
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <VStack>
    <For each={["unmount", "keepMounted"]}>
      {(lazyBehavior) => (
        <Steps.Root
          key={lazyBehavior}
          items={items}
          lazy
          lazyBehavior={lazyBehavior}
        >
          <Steps.List />
          <Steps.Contents />

          <ButtonGroup.Root>
            <Steps.PrevTrigger>
              <ButtonGroup.Item>Prev</ButtonGroup.Item>
            </Steps.PrevTrigger>
            <Steps.NextTrigger>
              <ButtonGroup.Item>Next</ButtonGroup.Item>
            </Steps.NextTrigger>
          </ButtonGroup.Root>
        </Steps.Root>
      )}
    </For>
  </VStack>
)
```

### Custom indicator

```tsx preview functional
const items = useMemo<Steps.Item[]>(
  () => [
    {
      complete: `😇`,
      current: `😎`,
      description: "レッドリボン軍",
      incomplete: `😑`,
      title: "孫悟空少年編",
    },
    {
      complete: `😇`,
      current: `😎`,
      description: "ピッコロ大魔王",
      incomplete: `😑`,
      title: "ピッコロ大魔王編",
    },
    {
      complete: `😇`,
      current: `😎`,
      description: "ベジータ・ナッパ",
      incomplete: `😑`,
      title: "サイヤ人編",
    },
  ],
  [],
)

return (
  <Steps.Root items={items}>
    <Steps.List />

    <ButtonGroup.Root>
      <Steps.PrevTrigger>
        <ButtonGroup.Item>Prev</ButtonGroup.Item>
      </Steps.PrevTrigger>
      <Steps.NextTrigger>
        <ButtonGroup.Item>Next</ButtonGroup.Item>
      </Steps.NextTrigger>
    </ButtonGroup.Root>
  </Steps.Root>
)
```

### Custom component

```tsx
<Steps.Root>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Indicator />
      <Box>
        <Steps.Title>孫悟空少年編</Steps.Title>
        <Steps.Description>レッドリボン軍</Steps.Description>
      </Box>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={1}>
      <Steps.Indicator />
      <Box>
        <Steps.Title>ピッコロ大魔王編</Steps.Title>
        <Steps.Description>ピッコロ大魔王</Steps.Description>
      </Box>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={2}>
      <Steps.Indicator />
      <Box>
        <Steps.Title>サイヤ人編</Steps.Title>
        <Steps.Description>ベジータ・ナッパ</Steps.Description>
      </Box>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Contents>
    <Steps.Content index={0}>
      地球の人里離れた山奥に住む尻尾の生えた少年・孫悟空はある日、西の都からやって来た少女・ブルマと出会う。そこで、7つ集めると神龍（シェンロン）が現れ、どんな願いでも一つだけ叶えてくれるというドラゴンボールの存在を、さらに育ての親である孫悟飯の形見として大切に持っていた球がその1つ「四星球（スーシンチュウ）」であることを知り、ブルマと共に残りのドラゴンボールを探す旅に出る。
    </Steps.Content>
    <Steps.Content index={1}>
      天下一武道会終了後、ピラフ一味によって復活したピッコロ大魔王によって、クリリンや亀仙人など悟空の仲間たちや多くの武道家たちが殺される。悟空は仇を討つため、道中に出会ったヤジロベーや仙猫カリンの協力を得て命を賭して潜在する力を引き出し、ピッコロ大魔王に闘いを挑み勝利する。
    </Steps.Content>
    <Steps.Content index={2}>
      ピッコロ（マジュニア）との闘いから約5年後、息子の孫悟飯を儲けて平和な日々を過ごしていた悟空のもとに、実兄・ラディッツが宇宙より来襲し、自分が惑星ベジータの戦闘民族・サイヤ人であることを知らされる。さらわれた孫悟飯を助けるため悟空は宿敵ピッコロと手を組み、自らの命と引き換えにラディッツを倒す。
    </Steps.Content>
  </Steps.Contents>

  <ButtonGroup.Root>
    <Steps.PrevTrigger>
      <ButtonGroup.Item>Prev</ButtonGroup.Item>
    </Steps.PrevTrigger>
    <Steps.NextTrigger>
      <ButtonGroup.Item>Next</ButtonGroup.Item>
    </Steps.NextTrigger>
  </ButtonGroup.Root>
</Steps.Root>
```

### Control

```tsx
const [index, setIndex] = useState(0)
const items = useMemo<Steps.Item[]>(
  () => [
    { description: "レッドリボン軍", title: "孫悟空少年編" },
    { description: "ピッコロ大魔王", title: "ピッコロ大魔王編" },
    { description: "ベジータ・ナッパ", title: "サイヤ人編" },
  ],
  [],
)

return (
  <Steps.Root index={index} items={items} onChange={setIndex}>
    <Steps.List />

    <ButtonGroup.Root>
      <Steps.PrevTrigger>
        <ButtonGroup.Item>Prev</ButtonGroup.Item>
      </Steps.PrevTrigger>
      <Steps.NextTrigger>
        <ButtonGroup.Item>Next</ButtonGroup.Item>
      </Steps.NextTrigger>
    </ButtonGroup.Root>
  </Steps.Root>
)
```

## Props

### Steps.Root

| Prop           | Default        | Type                                                                                                                      | Description                                                                                                                                                                                                      |
| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `as`           | -              | `As`                                                                                                                      | The HTML element to render.                                                                                                                                                                                      |
| `asChild`      | -              | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                                                                                                                                                       |
| `css`          | -              | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                                                                                                                                                                  |
| `colorScheme`  | -              | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                                                                                                                                                      |
| `size`         | `"md"`         | `"lg" \| "md" \| "sm"`                                                                                                    | The size of the component.                                                                                                                                                                                       |
| `variant`      | `"solid"`      | `"solid" \| "subtle"`                                                                                                     | The variant of the component.                                                                                                                                                                                    |
| `defaultIndex` | `0`            | `number`                                                                                                                  | The initial index of the active step.                                                                                                                                                                            |
| `index`        | -              | `number`                                                                                                                  | The index of the active step.                                                                                                                                                                                    |
| `items`        | -              | `StepsItem[]`                                                                                                             | If provided, generate step components based on steps.                                                                                                                                                            |
| `lazy`         | `false`        | `boolean`                                                                                                                 | If `true`, rendering of the content will be deferred until it is selected.                                                                                                                                       |
| `lazyBehavior` | `"unmount"`    | `LazyBehavior`                                                                                                            | The lazy behavior of content when not active. Only works when `lazy={true}`. - `unmount`: The content is always unmounted. - `keepMounted`: The content is initially unmounted, but stays mounted when selected. |
| `onChange`     | -              | `(index: number) => void`                                                                                                 | The callback function that is called when the active step index is changed.                                                                                                                                      |
| `orientation`  | `"horizontal"` | `"horizontal" \| "vertical"`                                                                                              | The orientation of the steps.                                                                                                                                                                                    |

### Steps.CompletedContent

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.Content

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `index`       | -       | `number`                                                                                                                  | The index of the step content.             |

### Steps.Description

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.Indicator

| Prop          | Default           | Type                                                                                                                      | Description                                |
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -                 | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -                 | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -                 | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -                 | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `complete`    | `<CheckIcon />`   | `ReactNode`                                                                                                               | The element for the complete indicator.    |
| `current`     | `<StepsNumber />` | `ReactNode`                                                                                                               | The element for the current indicator.     |
| `incomplete`  | `<StepsNumber />` | `ReactNode`                                                                                                               | The element for the incomplete indicator.  |

### Steps.Item

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `index`       | -       | `number`                                                                                                                  | The index of the step.                     |

### Steps.List

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.NextTrigger

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.Number

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.PrevTrigger

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.Separator

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Steps.Title

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

Currently, this section is being updated due to the migration of v2.