Stepper

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Step, Stepper } from "@/components/ui/stepper";

const steps = [
  { title: "Account", description: "Name and email" },
  { title: "Workspace", description: "Team and URL" },
  { title: "Billing", description: "Plan and payment" },
];

export default function StepperDemo() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex w-full max-w-xl flex-col gap-6">
      <Stepper aria-label="Workspace setup" currentStep={current}>
        {steps.map((s) => (
          <Step key={s.title} title={s.title} description={s.description} />
        ))}
      </Stepper>
      <div className="flex justify-end gap-2">
        <Button
          variant="outline"
          isDisabled={current === 0}
          onPress={() => setCurrent((c) => c - 1)}
        >
          Back
        </Button>
        <Button
          isDisabled={current === steps.length}
          onPress={() => setCurrent((c) => c + 1)}
        >
          {current >= steps.length - 1 ? "Finish" : "Continue"}
        </Button>
      </div>
    </div>
  );
}

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Step, Stepper } from "@/components/ui/stepper";

const steps = [
  {
    title: "Verify your domain",
    description: "Add a TXT record to acme.com",
    body: "We found the record. Domain verified 2 minutes ago.",
  },
  {
    title: "Configure SSO",
    description: "Connect Okta, Google or any SAML 2.0 provider",
    body: "Paste the metadata URL from your identity provider, then test the connection with your own account.",
  },
  {
    title: "Invite your team",
    description: "Members on acme.com can join automatically",
    body: "Send invites by email or share a join link.",
  },
];

export default function StepperVertical() {
  const [current, setCurrent] = useState(1);
  return (
    <Stepper
      aria-label="Single sign-on setup"
      orientation="vertical"
      currentStep={current}
      className="max-w-sm"
    >
      {steps.map((s, i) => (
        <Step key={s.title} title={s.title} description={s.description}>
          {i === current && (
            <div className="mt-1 flex flex-col items-start gap-3 rounded-lg border bg-card p-3 text-muted-foreground">
              <p>{s.body}</p>
              <Button size="sm" onPress={() => setCurrent((c) => c + 1)}>
                Mark as done
              </Button>
            </div>
          )}
        </Step>
      ))}
    </Stepper>
  );
}

import { useState } from "react";
import { Step, Stepper } from "@/components/ui/stepper";

const steps = ["Cart", "Shipping", "Payment", "Review"];

export default function StepperNavigation() {
  const [current, setCurrent] = useState(2);
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <Stepper
        aria-label="Checkout"
        currentStep={current}
        onStepChange={setCurrent}
      >
        {steps.map((title) => (
          <Step key={title} title={title} />
        ))}
      </Stepper>
      <p className="text-muted-foreground text-sm">
        Press a completed step to go back to it. Later steps unlock as you
        continue.
      </p>
    </div>
  );
}

import { CloudUploadIcon, PackageIcon, RocketIcon } from "lucide-react";
import { Step, Stepper } from "@/components/ui/stepper";

export default function StepperStatus() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-10">
      <Stepper aria-label="Deployment">
        <Step
          status="complete"
          title="Build"
          description="1m 12s"
          icon={<PackageIcon />}
        />
        <Step
          status="error"
          title="Upload"
          description="Bundle exceeds 50 MB"
          icon={<CloudUploadIcon />}
        />
        <Step status="upcoming" title="Release" icon={<RocketIcon />} />
      </Stepper>
      <Stepper aria-label="Data import">
        <Step status="complete" title="Upload file" />
        <Step status="error" title="Map columns" description="2 unmatched" />
        <Step status="upcoming" title="Import" />
      </Stepper>
    </div>
  );
}

import { Step, Stepper } from "@/components/ui/stepper";

const steps = ["Details", "Documents", "Review", "Submit"];

export default function StepperSizes() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-8">
      <Stepper aria-label="Application (small)" size="sm" currentStep={1}>
        {steps.map((t) => (
          <Step key={t} title={t} />
        ))}
      </Stepper>
      <Stepper aria-label="Application" currentStep={1}>
        {steps.map((t) => (
          <Step key={t} title={t} />
        ))}
      </Stepper>
    </div>
  );
}