Package Exports

chakra-ui-steps

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chakra-ui-steps) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Chakra UI Steps

Steps component designed to work seamlessly with Chakra UI.

An interactive demo can be viewed here.

screenshot

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, 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

`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