Features

• Multiple orientations
• Easily render step content
• Custom icons
• Size variants

Installation

Yarn:

yarn add chakra-ui-steps

NPM:

npm i chakra-ui-steps

Usage

NOTE: This v1.4.0 of this component requires @chakra-ui/react >= v1.6.7 to work correctly. You can follow the installation instructions here. If you aren't able to update your chakra version you can still use v1.3.0

In order to get started you will need to extend the default Chakra theme with the provided StepsStyleConfig object, like so:

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { StepsStyleConfig as Steps } from 'chakra-ui-steps';

const theme = extendTheme({
  components: {
    Steps,
  },
});

export const App = () => {
  return (
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  );
};

Once that's done you should be good to go!

Basic Example:

import { Step, Steps, useSteps } from 'chakra-ui-steps';

const content = (
  <Flex py={4}>
    <LoremIpsum p={1} />
  </Flex>
);

const steps = [
  { label: 'Step 1', content },
  { label: 'Step 2', content },
  { label: 'Step 3', content },
];

export const BasicExample = () => {
  const { nextStep, prevStep, setStep, reset, activeStep } = useSteps({
    initialStep: 0,
  });

  return (
    <Steps activeStep={activeStep}>
      {steps.map(({ label, content }) => (
        <Step label={label} key={label}>
          {content}
        </Step>
      ))}
    </Steps>
  );
};

Props

Note: Both the Step and Steps component extend the Chakra UI Box component so they accept all the default styling props.

Steps

| Prop | Type | Required | Description | Default | | ----------------- | ------------------- | -------- | -------------------------------------------------------------------------- | ---------- | | activeStep | number | yes | Currently active step | 0 | | colorScheme | string | no | Sets the color accent of the Steps component show | green | | orientation | string | no | Sets the orientation of the Steps component | horizontal | | responsive | boolean | no | Sets whether the component auto switches to vertical orientation on mobile | true | | checkIcon | React.ComponentType | no | Allows you to provide a custom check icon | undefined | | onClickStep | () => void | no | If defined, allows you to click on the step icons | undefined |

Step

| Prop | Type | Required | Description | Default | | --------------------- | ------------------- | -------- | -------------------------------------------------------------------- | --------- | | label | string | no | Sets the title of the step | '' | | description | string | no | Provides extra info about the step | '' | | icon | React.ComponentType | no | Custom icon to overwrite the default numerical indicator of the step | undefined | | isCompletedStep | boolean | no | Individually control each step state, defaults to active step | undefined |