Stepper

The Stepper component provides a visual representation of a multi-step process, allowing users to navigate through different steps. Each step can contain a label, optional content, and can be marked as optional. The component supports both horizontal and vertical orientations and can be customized with different colors.

Installation

Install the package

npm i @start-base/start-ui

Add the styles

To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.

app/layout.tsx

import "@start-base/start-ui/styles.css";

Import the component

import Stepper from '@start-base/start-ui/Stepper';

Usages

Stepper Default

Step 1: Plan

Step 2: Design (Optional)

Step 3: Develop

Gather requirements, research your audience, and define the goals and objectives of the website.

Stepper Vertical

Step 1: Plan

Step 2: Design (Optional)

Step 3: Develop

Gather requirements, research your audience, and define the goals and objectives of the website.

Stepper Step Content (Icon)

Step 1: Plan

Step 2: Design

Step 3: Develop

Gather requirements, research your audience, and define the goals and objectives of the website.

Stepper With Color

Step 1: Plan

Step 2: Design

Step 3: Develop

Gather requirements, research your audience, and define the goals and objectives of the website.

API

Name	Type	Default	Description
steps	`{ label: string; optional?: boolean undefined; icon?: ReactNode; content?: ReactNode; }[]`		Steps of the Stepper
direction	`horizontal` `vertical`	`horizontal`	Direction of the Stepper
color	`primary` `secondary`	`primary`	Color of the Stepper
className	`string`		className of the Stepper

Skeleton Tab