Steps - Keep React

Steps Component is a user interface element used to guide users through a multi-step process or workflow. It presents a visual representation of the various stages or steps a user needs to complete in a sequential order. Each step is typically accompanied by a title, description, and an indicator of completion status, helping users track their progress.

Table of Contents#

Default Step#

The Default Step refers to the fundamental and default configuration of a Steps Component within a user interface. It provides a clear visual representation of each step in a multi-step process.

  • Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

Step With Number#

  • 1

    Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • 2

    Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • 3

    Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

Step With Icon#

  • Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

Interactive Step#

  • 1

    Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • 2

    Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

  • 3

    Visit Keep Design Site

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, accusamus?

Step Item API Reference#

Explore the available props for the <StepItem/> component

PropertyDescriptionTypeDefault
activeIndicates if the step is active.booleanfalse
classNameCustom class to style the step title.stringNone