BigBlocks

Step Indicator

Display progress through multi-step processes with horizontal and vertical variants

Account

Security

Backup

Complete

"use client"

import { useState } from "react"
import { StepIndicator } from "@/registry/bigblocks/blocks/step-indicator"
import { Button } from "@/components/ui/button"

export function StepIndicatorDemo() {
  const [activeStep, setActiveStep] = useState(1)
  
  const getStatus = (stepIndex: number): "complete" | "active" | "pending" => {
    if (activeStep > stepIndex) return "complete"
    if (activeStep === stepIndex) return "active"
    return "pending"
  }
  
  const steps = [
    { id: "1", label: "Account", status: getStatus(0) },
    { id: "2", label: "Security", status: getStatus(1) },
    { id: "3", label: "Backup", status: getStatus(2) },
    { id: "4", label: "Complete", status: getStatus(3) }
  ]

  return (
    <div className="w-full">
      <StepIndicator steps={steps} />
      <div className="mt-8 flex gap-2">
        <Button 
          variant="outline"
          onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
          disabled={activeStep === 0}
        >
          Previous
        </Button>
        <Button 
          onClick={() => setActiveStep(Math.min(3, activeStep + 1))}
          disabled={activeStep === 3}
        >
          {activeStep === 3 ? "Finish" : "Next"}
        </Button>
      </div>
    </div>
  )
}

Installation

npx shadcn@latest add https://bigblocks-registry.vercel.app/r/step-indicator.json

Usage

import { StepIndicator } from "@/components/ui/step-indicator"
 
const steps = [
  { id: "1", label: "Account", status: "complete" },
  { id: "2", label: "Security", status: "active" },
  { id: "3", label: "Backup", status: "pending" },
  { id: "4", label: "Complete", status: "pending" }
]
 
export default function Example() {
  return <StepIndicator steps={steps} />
}

Examples

Vertical

Use the vertical variant for authentication flows and onboarding processes.

Generate Identity

Set Password

Create Profile

Save Backup

"use client"

import { useState } from "react"
import { StepIndicator } from "@/registry/bigblocks/blocks/step-indicator"
import { Button } from "@/components/ui/button"

export function StepIndicatorVertical() {
  const [activeStep, setActiveStep] = useState(1)
  
  const getStatus = (stepIndex: number): "complete" | "active" | "pending" => {
    if (activeStep > stepIndex) return "complete"
    if (activeStep === stepIndex) return "active"
    return "pending"
  }
  
  const steps = [
    { 
      id: "1", 
      label: "Generate Identity", 
      status: getStatus(0) 
    },
    { 
      id: "2", 
      label: "Set Password", 
      status: getStatus(1) 
    },
    { 
      id: "3", 
      label: "Create Profile", 
      status: getStatus(2) 
    },
    { 
      id: "4", 
      label: "Save Backup", 
      status: getStatus(3) 
    }
  ]

  return (
    <div className="w-full max-w-md">
      <StepIndicator steps={steps} variant="vertical" />
      <div className="mt-8 flex gap-2">
        <Button 
          variant="outline"
          onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
          disabled={activeStep === 0}
        >
          Back
        </Button>
        <Button 
          onClick={() => setActiveStep(Math.min(3, activeStep + 1))}
          disabled={activeStep === 3}
        >
          {activeStep === 3 ? "Complete Setup" : "Continue"}
        </Button>
      </div>
    </div>
  )
}

With Descriptions

Add descriptions to guide users through complex authentication steps.

Create Identity

Generate your Bitcoin keypair

Secure Account

Set encryption password

Download Backup

Save encrypted recovery file

Connect OAuth

Optional cloud backup

"use client"

import { useState } from "react"
import { StepIndicator } from "@/registry/bigblocks/blocks/step-indicator"
import { Button } from "@/components/ui/button"

export function StepIndicatorWithDescriptions() {
  const [activeStep, setActiveStep] = useState(0)
  
  const getStatus = (stepIndex: number): "complete" | "active" | "pending" => {
    if (activeStep > stepIndex) return "complete"
    if (activeStep === stepIndex) return "active"
    return "pending"
  }
  
  const steps = [
    { 
      id: "1", 
      label: "Create Identity", 
      description: "Generate your Bitcoin keypair",
      status: getStatus(0) 
    },
    { 
      id: "2", 
      label: "Secure Account", 
      description: "Set encryption password",
      status: getStatus(1) 
    },
    { 
      id: "3", 
      label: "Download Backup", 
      description: "Save encrypted recovery file",
      status: getStatus(2) 
    },
    { 
      id: "4", 
      label: "Connect OAuth", 
      description: "Optional cloud backup",
      status: getStatus(3) 
    }
  ]

  return (
    <div className="w-full max-w-md">
      <StepIndicator steps={steps} variant="vertical" />
      <div className="mt-8 flex gap-2">
        <Button 
          variant="outline"
          onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
          disabled={activeStep === 0}
        >
          Back
        </Button>
        <Button 
          onClick={() => setActiveStep(Math.min(3, activeStep + 1))}
          disabled={activeStep === 3}
        >
          {activeStep === 3 ? "Complete" : "Continue"}
        </Button>
      </div>
    </div>
  )
}

API Reference

StepIndicator

Prop	Type	Default	Description
steps	`Step[]`	-	Array of step objects
className	`string`	`""`	Additional CSS classes
variant	`"horizontal" \| "vertical"`	`"horizontal"`	Display orientation

Step Interface

interface Step {
  id: string
  label: string
  description?: string
  status: "pending" | "active" | "complete"
}

Social Feed Sweep Wallet