Chakra UI Steps

Steps component designed to work seamlessly with Chakra UI.

An interactive demo can be viewed here.

If you enjoy this component, please consider buying me a coffee :)

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 component requires Chakra UI > v1.0 to work correctly. You can follow the installation instructions here.

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

`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

pianomansam/chakra-ui-steps