Steps

Used to indicate progress through a multi-step process

Step 2

'use client'

import { Group } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'

export const StepsBasic = () => {
  return (
    <Steps.Root defaultStep={1} count={3}>
      <Steps.List>
        <Steps.Item index={0} title="Step 1" />
        <Steps.Item index={1} title="Step 2" />
        <Steps.Item index={2} title="Step 3" />
      </Steps.List>

      <Steps.Content index={0}>Step 1</Steps.Content>
      <Steps.Content index={1}>Step 2</Steps.Content>
      <Steps.Content index={2}>Step 3</Steps.Content>
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <Group>
        <Steps.PrevTrigger asChild>
          <Button variant="outline" size="sm">
            Prev
          </Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </Steps.NextTrigger>
      </Group>
    </Steps.Root>
  )
}

Anatomy

import { Steps } from '@saas-ui/react/steps'

<Steps.Root>
  <Steps.List>
    <Steps.Item />
  </Steps.List>
  <Steps.Content />
  <Steps.CompleteContent />
  <Steps.PrevTrigger />
  <Steps.NextTrigger />
</Steps.Root>

Examples

Sizes

Use the size prop to change the size of the steps component.

Step 1

'use client'

import { For, Group, Stack } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'

export const StepsWithSizes = () => {
  return (
    <Stack gap="16">
      <For each={['sm', 'md', 'lg']}>
        {(size) => (
          <Steps.Root key={size} size={size} count={3}>
            <Steps.List>
              <Steps.Item index={0} title="Step 1" />
              <Steps.Item index={1} title="Step 2" />
              <Steps.Item index={2} title="Step 3" />
            </Steps.List>

            <Steps.Content index={0}>Step 1</Steps.Content>
            <Steps.Content index={1}>Step 2</Steps.Content>
            <Steps.Content index={2}>Step 3</Steps.Content>
            <Steps.CompletedContent>
              All steps are complete!
            </Steps.CompletedContent>

            <Group>
              <Steps.PrevTrigger asChild>
                <Button variant="outline" size="sm">
                  Prev
                </Button>
              </Steps.PrevTrigger>
              <Steps.NextTrigger asChild>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </Steps.NextTrigger>
            </Group>
          </Steps.Root>
        )}
      </For>
    </Stack>
  )
}

Variants

Use the variant prop to change the appearance of the steps component.

Step 1

'use client'

import { For, Group, Stack } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'

export const StepsWithVariants = () => {
  return (
    <Stack gap="16">
      <For each={['subtle', 'solid']}>
        {(variant) => (
          <Steps.Root key={variant} variant={variant} count={3}>
            <Steps.List>
              <Steps.Item index={0} title="Step 1" />
              <Steps.Item index={1} title="Step 2" />
              <Steps.Item index={2} title="Step 3" />
            </Steps.List>

            <Steps.Content index={0}>Step 1</Steps.Content>
            <Steps.Content index={1}>Step 2</Steps.Content>
            <Steps.Content index={2}>Step 3</Steps.Content>
            <Steps.CompletedContent>
              All steps are complete!
            </Steps.CompletedContent>

            <Group>
              <Steps.PrevTrigger asChild>
                <Button variant="outline" size="sm">
                  Prev
                </Button>
              </Steps.PrevTrigger>
              <Steps.NextTrigger asChild>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </Steps.NextTrigger>
            </Group>
          </Steps.Root>
        )}
      </For>
    </Stack>
  )
}

Colors

Use the colorPalette prop to change the color scheme of the component.

Step 2

'use client'

import { For, Group, Stack } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'

import { colorPalettes } from '../lib/color-palettes'

export const StepsWithColors = () => {
  return (
    <Stack gap="10" width="full">
      <For each={colorPalettes}>
        {(colorPalette) => (
          <Steps.Root
            key={colorPalette}
            defaultStep={1}
            count={3}
            colorPalette={colorPalette}
          >
            <Steps.List>
              <Steps.Item index={0} title="Step 1" />
              <Steps.Item index={1} title="Step 2" />
              <Steps.Item index={2} title="Step 3" />
            </Steps.List>

            <Steps.Content index={0}>Step 1</Steps.Content>
            <Steps.Content index={1}>Step 2</Steps.Content>
            <Steps.Content index={2}>Step 3</Steps.Content>
            <Steps.CompletedContent>
              All steps are complete!
            </Steps.CompletedContent>

            <Group>
              <Steps.PrevTrigger asChild>
                <Button variant="outline" size="sm">
                  Prev
                </Button>
              </Steps.PrevTrigger>
              <Steps.NextTrigger asChild>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </Steps.NextTrigger>
            </Group>
          </Steps.Root>
        )}
      </For>
    </Stack>
  )
}

Vertical

Use the orientation prop to change the orientation of the steps component.

Step 2

'use client'

import { Group, Stack } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'

export const StepsVertical = () => {
  return (
    <Steps.Root orientation="vertical" height="400px" defaultStep={1} count={3}>
      <Steps.List>
        <Steps.Item index={0} title="Step 1" />
        <Steps.Item index={1} title="Step 2" />
        <Steps.Item index={2} title="Step 3" />
      </Steps.List>

      <Stack>
        <Steps.Content index={0}>Step 1</Steps.Content>
        <Steps.Content index={1}>Step 2</Steps.Content>
        <Steps.Content index={2}>Step 3</Steps.Content>
        <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

        <Group>
          <Steps.PrevTrigger asChild>
            <Button variant="outline" size="sm">
              Prev
            </Button>
          </Steps.PrevTrigger>
          <Steps.NextTrigger asChild>
            <Button variant="outline" size="sm">
              Next
            </Button>
          </Steps.NextTrigger>
        </Group>
      </Stack>
    </Steps.Root>
  )
}

Icon

Pass the icon prop to the StepsItem component to display an icon.

Payment

'use client'

import { Group } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'
import { LuCalendar, LuUser, LuWallet } from 'react-icons/lu'

export const StepsWithIcon = () => {
  return (
    <Steps.Root defaultStep={1} count={3}>
      <Steps.List>
        <Steps.Item index={0} icon={<LuUser />} />
        <Steps.Item index={1} icon={<LuWallet />} />
        <Steps.Item index={2} icon={<LuCalendar />} />
      </Steps.List>

      <Steps.Content index={0}>Contact Details</Steps.Content>
      <Steps.Content index={1}>Payment</Steps.Content>
      <Steps.Content index={2}>Book an Appointment</Steps.Content>
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <Group>
        <Steps.PrevTrigger asChild>
          <Button variant="outline" size="sm">
            Prev
          </Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </Steps.NextTrigger>
      </Group>
    </Steps.Root>
  )
}

Description

Pass the description prop to the StepsItem component to display a description.

Step 2

'use client'

import { Group } from '@chakra-ui/react'
import { Button, Steps } from '@saas-ui/react'

export const StepsWithDescription = () => {
  return (
    <Steps.Root defaultStep={1} count={3}>
      <Steps.List>
        <Steps.Item index={0} title="Step 1" description="This step" />
        <Steps.Item index={1} title="Step 2" description="That step" />
        <Steps.Item index={2} title="Step 3" description="Final step" />
      </Steps.List>

      <Steps.Content index={0}>Step 1</Steps.Content>
      <Steps.Content index={1}>Step 2</Steps.Content>
      <Steps.Content index={2}>Step 3</Steps.Content>
      <Steps.CompletedContent>All steps are complete!</Steps.CompletedContent>

      <Group>
        <Steps.PrevTrigger asChild>
          <Button variant="outline" size="sm">
            Prev
          </Button>
        </Steps.PrevTrigger>
        <Steps.NextTrigger asChild>
          <Button variant="outline" size="sm">
            Next
          </Button>
        </Steps.NextTrigger>
      </Group>
    </Steps.Root>
  )
}

Props

Root

Prop	Default	Type
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` The orientation of the component
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`variant`	`'solid'`	`'solid' \| 'subtle'` The variant of the component
`size`	`'md'`	`'sm' \| 'md' \| 'lg'` The size of the component
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`count`		`number` The total number of steps
`defaultStep`		`number` The initial value of the step
`ids`		`ElementIds` The custom ids for the stepper elements
`linear`		`boolean` If `true`, the stepper requires the user to complete the steps in order
`onStepChange`		`(details: StepChangeDetails) => void` Callback to be called when the value changes
`onStepComplete`		`VoidFunction` Callback to be called when a step is completed
`step`		`number` The current value of the stepper
`as`		`React.ElementType` The underlying element to render.
`unstyled`		`boolean` Whether to remove the component's style.

Status

Switch

Steps

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Anatomy

Anatomy