Stepper

Displays a sequence of steps that the user can navigate through.
1
Create an account
2
Enter details
3
Start building!
Properties
No properties to configure
Example
Source Code
Installation
"use client";

import React from "react";
import { Stepper } from "@/subframe/components/Stepper";

function StepperExample() {
  return (
    <Stepper>
      <Stepper.Step
        variant="completed"
        firstStep={true}
        stepNumber="1"
        label="Create an account"
      />
      <Stepper.Step variant="active" stepNumber="2" label="Enter details" />
      <Stepper.Step lastStep={true} stepNumber="3" label="Start building!" />
    </Stepper>
  );
}

export default StepperExample;

Props

Stepper
Step
Prop
Type
Default
Additional info
children
React.ReactNode

Examples

Variants

First and last step

Use firstStep and lastStep props to indicate the first and last steps.