Steps

This component features a set of progress cards that visually represent the status of various process steps. Each card displays the step number, name, and current status, using different styles and colors to indicate completion, in progress, or pending states.

This component showcases a series of steps in a vertical card layout. Each step includes a number, name, and a brief description, with completed steps visually distinguished by a highlighted border.

This component visualizes a multi-step process, displaying each step with a number and name. It provides clear indicators of step completion, ongoing steps, and pending steps, aiding users in navigating through complex tasks like form submissions or checkout processes.

This component represents a step-by-step process with added context, displaying titles and details for each step. It offers a more informative visualization of progress, aiding users in understanding the purpose of each step and what actions are required.

This component clearly indicates progress through sequential steps. Its minimalist design elements and intuitive markers simplify user navigation and enhance comprehension of the process flow.

This component utilizes a radial chart to represent progress visually. With a minimalist design and clear data labels, it offers an intuitive way to convey completion status. The chart's dynamic presentation enhances user engagement and comprehension of progress towards a goal.

This component displays a series of steps, suitable for processes with a clear sequential flow. Each step is represented with a number and a name, with completed steps highlighted. Arrows between steps indicate progression, making it easy for users.

This component serves as a step-by-step progress tracker, enabling users to visualize their journey through a series of tasks or stages. Each step is represented with a clear label and an icon indicating its completion status.