Steps
Indicate progress through numbered steps in multi-step workflows.
Theming
The Stepper
component is a multipart component. The styling needs to be
applied to each part specifically.
To learn more about styling multipart components, visit the Chakra UI Component Style page.
Anatomy
container
item
content
stepper
step
title
description
indicator
separator
icon
number
Default theme
import { createMultiStyleConfigHelpers } from '@chakra-ui/react'const $size = cssVar('stepper-indicator-size')const $accentColor = cssVar('stepper-accent-color')const $verticalSeperatorOffset = cssVar('stepper-vertical-seperator-offset')const { defineMultiStyleConfig, definePartsStyle } =createMultiStyleConfigHelpers([// saas ui parts'container','item','content',// default parts'stepper','step','title','description','indicator','separator','icon','number',])const baseStyle = definePartsStyle(({ colorScheme: c }) => ({container: {display: 'flex',flexDirection: 'column',gap: 4,},item: {w: 'full',},content: {['&[data-orientation=vertical]']: {mt: 2,ms: $verticalSeperatorOffset.reference,borderLeftWidth: '1px',ps: 6,},},stepper: {gap: '2',[$verticalSeperatorOffset.variable]: `10px`,[$accentColor.variable]: `colors.${c}.500`,_dark: {[$accentColor.variable]: `colors.${c}.500`,},},separator: {transitionProperty: 'common',transitionDuration: 'normal',['&[data-orientation=horizontal]']: {height: '1px',},['&[data-orientation=vertical]']: {width: '1px',},['.sui-steps__item .chakra-step &[data-orientation=vertical]']: {display: 'none',},['.sui-steps__item &[data-orientation=vertical]']: {position: 'static',minH: 4,ms: $verticalSeperatorOffset.reference,},},step: {['&[data-orientation=vertical]']: {alignItems: 'center',},},}))const variantOutline = definePartsStyle((props) => ({}))const variantSolid = definePartsStyle((props) => ({indicator: {'&[data-status=active]': {borderWidth: '0',bg: $accentColor.reference,color: 'chakra-inverse-text',},'&[data-status=complete]': {bg: $accentColor.reference,color: 'chakra-inverse-text',},'&[data-status=incomplete]': {borderWidth: '0',bg: 'blackAlpha.200',_dark: {bg: 'whiteAlpha.200',},},},}))const variantSubtle = definePartsStyle((props) => {const { theme, colorScheme: c } = propsreturn {stepper: {[$accentColor.variable]: `colors.${c}.100`,},indicator: {'&[data-status=active]': {borderWidth: '0',bg: $accentColor.reference,color: `${c}.500`,_dark: {bg: transparentize(`${c}.200`, 0.16)(theme),},},'&[data-status=complete]': {bg: $accentColor.reference,color: `${c}.500`,_dark: {bg: transparentize(`${c}.200`, 0.24)(theme),color: `${c}.200`,},},'&[data-status=incomplete]': {borderWidth: '0',bg: 'blackAlpha.200',color: 'blackAlpha.700',_dark: {bg: 'whiteAlpha.200',color: 'whiteAlpha.600',},},},}})export const stepperTheme = defineMultiStyleConfig({defaultProps: {variant: 'outline',colorScheme: 'primary',size: 'md',},baseStyle,variants: {outline: variantOutline,solid: variantSolid,subtle: variantSubtle,},sizes: {xs: definePartsStyle({stepper: {[$size.variable]: 'sizes.4',[$verticalSeperatorOffset.variable]: `7px`,},}),sm: definePartsStyle({stepper: {[$size.variable]: 'sizes.6',[$verticalSeperatorOffset.variable]: `11px`,},}),md: definePartsStyle({stepper: {[$size.variable]: 'sizes.7',[$verticalSeperatorOffset.variable]: `14px`,},}),lg: definePartsStyle({stepper: {[$size.variable]: 'sizes.8',[$verticalSeperatorOffset.variable]: `16px`,},}),},})
Was this helpful?