2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T2a16,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Check, X } from "lucide-react"; import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type Step = { title: ReactNode; description?: ReactNode; /** Adds an "Optional" note under the title. */ optional?: boolean; /** Shown under the step in the vertical layout while it is current. */ content?: ReactNode; }; export type StepState = "complete" | "current" | "upcoming" | "error"; export interface StepperProps { steps: Step[]; /** Index of the current step. Every step before it counts as complete; `steps.length` means all done. */ current: number; /** Lets people jump back to a finished step by clicking it. */ onStepClick?: (index: number) => void; /** Steps that need attention, drawn in red. */ errors?: number[]; orientation?: "horizontal" | "vertical"; /** default: numbered circles · dots: small dots, the current one stretched · compact: "Step 2 of 4" over a segmented bar. */ variant?: "default" | "dots" | "compact"; className?: string; } const SPRING = { type: "spring", bounce: 0, duration: 0.45 } as const; /** Index, next, back and jump helpers for a multi-step flow. */ export function useStepper(count: number, initial = 0) { const [step, setStep] = useState(initial); const goTo = useCallback((i: number) => setStep(Math.max(0, Math.min(count, i))), [count]); return { step, setStep: goTo, next: () => goTo(step + 1), back: () => goTo(step - 1), isFirst: step === 0, isLast: step === count - 1, isDone: step >= count }; } function stateOf(i: number, current: number, errors?: number[]): StepState { if (errors?.includes(i)) return "error"; return i < current ? "complete" : i === current ? "current" : "upcoming"; } function Marker({ index, state }: { index: number; state: StepState }) { return ( {state === "complete" ? ( ) : state === "error" ? ( ) : ( {index + 1} )} ); } function Label({ step, state, notes = true }: { step: Step; state: StepState; notes?: boolean }) { return ( {step.title} {notes && (step.description || step.optional) && ( {step.description} {step.optional && {step.description ? " · " : ""}Optional} )} ); } /** Progress through a multi-step flow: numbered circles joined by lines, dots, or a compact "Step 2 of 4". */ export function Stepper({ steps, current, onStepClick, errors, orientation = "horizontal", variant = "default", className }: StepperProps) { const at = Math.min(current, steps.length - 1); const ref = useRef(null); const [width, setWidth] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width)); ro.observe(el); return () => ro.disconnect(); }, []); const titles = width >= steps.length * 116; const notes = width >= steps.length * 150; if (variant === "compact") { return (

{steps[at]?.title}

Step {at + 1} of {steps.length}

{steps.map((_, i) => ( ))}

); } if (variant === "dots") { return (

onStepClick?.(i)} aria-current={state === "current" ? "step" : undefined} aria-label={typeof s.title === "string" ? s.title : `Step ${i + 1}`} initial={false} animate={{ width: state === "current" ? 22 : 7 }} transition={{ type: "spring", bounce: 0.25, duration: 0.4 }} className={cn("block h-[7px] rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950/25 dark:focus-visible:ring-white/30", state === "upcoming" ? "bg-neutral-950/15 dark:bg-white/20" : state === "error" ? "bg-red-500" : "bg-neutral-950 dark:bg-white", clickable && "cursor-pointer hover:opacity-70")} />

); } if (orientation === "vertical") { return (

{!last && ( )}

{clickable ? ( ) : ( )} {state === "current" && s.content && (
{s.content}
)}

); } return (

{titles && } ); return (

{clickable ? ( ) : ( {body} )} {!last && ( )}

); })}

); } export default Stepper; 2e:T1c9dd,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Check, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type Step = {
  title: ReactNode;
  description?: ReactNode;
  /** Adds an "Optional" note under the title. */
  optional?: boolean;
  /** Shown under the step in the vertical layout while it is current. */
  content?: ReactNode;
};

export type StepState = "complete" | "current" | "upcoming" | "error";

export interface StepperProps {
  steps: Step[];
  /** Index of the current step. Every step before it counts as complete; `steps.length` means all done. */
  current: number;
  /** Lets people jump back to a finished step by clicking it. */
  onStepClick?: (index: number) => void;
  /** Steps that need attention, drawn in red. */
  errors?: number[];
  orientation?: "horizontal" | "vertical";
  /** default: numbered circles · dots: small dots, the current one stretched · compact: "Step 2 of 4" over a segmented bar. */
  variant?: "default" | "dots" | "compact";
  className?: string;
}

const SPRING = { type: "spring", bounce: 0, duration: 0.45 } as const;

/** Index, next, back and jump helpers for a multi-step flow. */
export function useStepper(count: number, initial = 0) {
  const [step, setStep] = useState(initial);
  const goTo = useCallback((i: number) => setStep(Math.max(0, Math.min(count, i))), [count]);
  return { step, setStep: goTo, next: () => goTo(step + 1), back: () => goTo(step - 1), isFirst: step === 0, isLast: step === count - 1, isDone: step >= count };
}

function stateOf(i: number, current: number, errors?: number[]): StepState {
  if (errors?.includes(i)) return "error";
  return i < current ? "complete" : i === current ? "current" : "upcoming";
}

function Marker({ index, state }: { index: number; state: StepState }) {
  return (
    <span
      className={cn(
        "relative flex size-7 shrink-0 items-center justify-center rounded-full text-[12px] font-semibold tabular-nums transition-[background-color,color,box-shadow] duration-300",
        state === "complete" && "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950",
        state === "current" && "bg-white text-neutral-950 shadow-[0_0_0_1.5px_rgb(10_10_10),0_0_0_5px_rgb(10_10_10/0.08)] dark:bg-neutral-900 dark:text-white dark:shadow-[0_0_0_1.5px_rgb(255_255_255),0_0_0_5px_rgb(255_255_255/0.12)]",
        state === "upcoming" && "bg-white text-neutral-400 ring-1 ring-black/[0.12] dark:bg-neutral-900 dark:text-neutral-500 dark:ring-white/[0.14]",
        state === "error" && "bg-red-600 text-white dark:bg-red-500",
      )}
    >
      <AnimatePresence mode="popLayout" initial={false}>
        {state === "complete" ? (
          <motion.span key="check" initial={{ scale: 0.4, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.4, opacity: 0 }} transition={{ type: "spring", bounce: 0.4, duration: 0.35 }}>
            <Check className="size-3.5" strokeWidth={3} />
          </motion.span>
        ) : state === "error" ? (
          <motion.span key="x" initial={{ scale: 0.4, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ scale: 0.4, opacity: 0 }}>
            <X className="size-3.5" strokeWidth={3} />
          </motion.span>
        ) : (
          <motion.span key="n" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
            {index + 1}
          </motion.span>
        )}
      </AnimatePresence>
    </span>
  );
}

function Label({ step, state, notes = true }: { step: Step; state: StepState; notes?: boolean }) {
  return (
    <span className="min-w-0">
      <span className={cn("block text-[13px] font-medium leading-5 transition-colors", state === "upcoming" ? "text-neutral-500" : state === "error" ? "text-red-600 dark:text-red-400" : "text-neutral-950 dark:text-white")}>{step.title}</span>
      {notes && (step.description || step.optional) && (
        <span className="block text-[12px] leading-4 text-neutral-500">
          {step.description}
          {step.optional && <span className="text-neutral-400">{step.description ? " · " : ""}Optional</span>}
        </span>
      )}
    </span>
  );
}

/** Progress through a multi-step flow: numbered circles joined by lines, dots, or a compact "Step 2 of 4". */
export function Stepper({ steps, current, onStepClick, errors, orientation = "horizontal", variant = "default", className }: StepperProps) {
  const at = Math.min(current, steps.length - 1);
  const ref = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width));
    ro.observe(el);
    return () => ro.disconnect();
  }, []);
  const titles = width >= steps.length * 116;
  const notes = width >= steps.length * 150;

  if (variant === "compact") {
    return (
      <div className={cn("w-full", className)} aria-label={`Step ${at + 1} of ${steps.length}`}>
        <div className="mb-2 flex items-baseline justify-between gap-3">
          <p className="truncate text-[13px] font-medium text-neutral-950 dark:text-white">{steps[at]?.title}</p>
          <p className="shrink-0 text-[12px] tabular-nums text-neutral-500">
            Step {at + 1} of {steps.length}
          </p>
        </div>
        <div className="flex gap-1">
          {steps.map((_, i) => (
            <span key={i} className="relative h-1 flex-1 overflow-hidden rounded-full bg-neutral-950/[0.08] dark:bg-white/[0.1]">
              <motion.span className={cn("absolute inset-0 origin-left rounded-full", errors?.includes(i) ? "bg-red-500" : "bg-neutral-950 dark:bg-white")} initial={false} animate={{ scaleX: i < current ? 1 : i === current ? 0.5 : 0 }} transition={SPRING} />
            </span>
          ))}
        </div>
      </div>
    );
  }

  if (variant === "dots") {
    return (
      <ol className={cn("flex items-center gap-1.5", className)} aria-label={`Step ${at + 1} of ${steps.length}`}>
        {steps.map((s, i) => {
          const state = stateOf(i, current, errors);
          const clickable = !!onStepClick && i < current;
          return (
            <li key={i}>
              <motion.button
                type="button"
                disabled={!clickable}
                onClick={() => onStepClick?.(i)}
                aria-current={state === "current" ? "step" : undefined}
                aria-label={typeof s.title === "string" ? s.title : `Step ${i + 1}`}
                initial={false}
                animate={{ width: state === "current" ? 22 : 7 }}
                transition={{ type: "spring", bounce: 0.25, duration: 0.4 }}
                className={cn("block h-[7px] rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950/25 dark:focus-visible:ring-white/30", state === "upcoming" ? "bg-neutral-950/15 dark:bg-white/20" : state === "error" ? "bg-red-500" : "bg-neutral-950 dark:bg-white", clickable && "cursor-pointer hover:opacity-70")}
              />
            </li>
          );
        })}
      </ol>
    );
  }

  if (orientation === "vertical") {
    return (
      <ol className={cn("flex flex-col", className)}>
        {steps.map((s, i) => {
          const state = stateOf(i, current, errors);
          const clickable = !!onStepClick && i < current;
          const last = i === steps.length - 1;
          return (
            <li key={i} aria-current={state === "current" ? "step" : undefined} className="relative flex gap-3">
              <div className="flex flex-col items-center">
                <Marker index={i} state={state} />
                {!last && (
                  <span className="relative my-1 w-[1.5px] flex-1 overflow-hidden rounded-full bg-neutral-950/[0.1] dark:bg-white/[0.12]">
                    <motion.span className="absolute inset-0 origin-top bg-neutral-950 dark:bg-white" initial={false} animate={{ scaleY: i < current ? 1 : 0 }} transition={SPRING} />
                  </span>
                )}
              </div>
              <div className={cn("min-w-0 flex-1 pt-1", !last && "pb-6")}>
                {clickable ? (
                  <button type="button" onClick={() => onStepClick?.(i)} className="rounded-[6px] text-left outline-none hover:opacity-70 focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/25">
                    <Label step={s} state={state} />
                  </button>
                ) : (
                  <Label step={s} state={state} />
                )}
                <AnimatePresence initial={false}>
                  {state === "current" && s.content && (
                    <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={SPRING} className="overflow-hidden">
                      <div className="pt-3">{s.content}</div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            </li>
          );
        })}
      </ol>
    );
  }

  return (
    <div ref={ref} className={cn("w-full", className)}>
    <ol className="flex w-full items-start">
      {steps.map((s, i) => {
        const state = stateOf(i, current, errors);
        const clickable = !!onStepClick && i < current;
        const last = i === steps.length - 1;
        const body = (
          <>
            <Marker index={i} state={state} />
            {titles && <Label step={s} state={state} notes={notes} />}
          </>
        );
        return (
          <li key={i} aria-current={state === "current" ? "step" : undefined} className={cn("flex min-w-0 items-start", !last && "flex-1")}>
            {clickable ? (
              <button type="button" onClick={() => onStepClick?.(i)} className="flex shrink-0 items-start gap-2.5 rounded-[10px] text-left outline-none hover:opacity-70 focus-visible:ring-2 focus-visible:ring-neutral-950/20 dark:focus-visible:ring-white/25">
                {body}
              </button>
            ) : (
              <span className="flex shrink-0 items-start gap-2.5">{body}</span>
            )}
            {!last && (
              <span className="relative mx-3 mt-[13px] h-[1.5px] min-w-4 flex-1 overflow-hidden rounded-full bg-neutral-950/[0.1] dark:bg-white/[0.12]">
                <motion.span className="absolute inset-0 origin-left bg-neutral-950 dark:bg-white" initial={false} animate={{ scaleX: i < current ? 1 : 0 }} transition={SPRING} />
              </span>
            )}
          </li>
        );
      })}
    </ol>
    </div>
  );
}

export default Stepper;

2f:Tf3d,"use client"; import { AnimatePresence, motion } from "motion/react"; import { PartyPopper } from "lucide-react"; import { Stepper, useStepper } from "@/components/scalar-ui/stepper"; const STEPS = [ { title: "Account", description: "Name and email" }, { title: "Workspace", description: "Name and URL" }, { title: "Invite", description: "Your team", optional: true }, { title: "Plan", description: "Pick a plan" }, ]; const BODY = [ ["Create your account", "We'll use this to sign you in and send receipts."], ["Name your workspace", "Pick something your team will recognise. You can change it later."], ["Invite your team", "Add teammates now or skip and do it from Settings."], ["Choose a plan", "Start free; upgrade when you need more seats."], ]; export default function Demo() { const s = useStepper(STEPS.length); return (

{s.isDone ? (

You're all set

Northwind is ready. Your team will get their invites in a minute.

) : ( <>

{BODY[s.step][0]}

{BODY[s.step][1]}

)}

{STEPS[s.step]?.optional && ( )} {!s.isDone && ( )}

); } 30:T7a4e,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { PartyPopper } from "lucide-react";
import { Stepper, useStepper } from "@/components/scalar-ui/stepper";

const STEPS = [
  { title: "Account", description: "Name and email" },
  { title: "Workspace", description: "Name and URL" },
  { title: "Invite", description: "Your team", optional: true },
  { title: "Plan", description: "Pick a plan" },
];

const BODY = [
  ["Create your account", "We'll use this to sign you in and send receipts."],
  ["Name your workspace", "Pick something your team will recognise. You can change it later."],
  ["Invite your team", "Add teammates now or skip and do it from Settings."],
  ["Choose a plan", "Start free; upgrade when you need more seats."],
];

export default function Demo() {
  const s = useStepper(STEPS.length);
  return (
    <div className="w-[min(100%,680px)] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-16px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <Stepper steps={STEPS} current={s.step} onStepClick={s.setStep} />
      <div className="mt-6 min-h-[132px] rounded-[16px] bg-neutral-50 p-5 ring-1 ring-black/[0.04] dark:bg-white/[0.03] dark:ring-white/[0.06]">
        <AnimatePresence mode="wait" initial={false}>
          <motion.div key={s.step} initial={{ opacity: 0, x: 12 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -12 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }}>
            {s.isDone ? (
              <div className="flex items-center gap-3">
                <span className="flex size-10 items-center justify-center rounded-full bg-emerald-500/12 text-emerald-600 dark:text-emerald-400">
                  <PartyPopper className="size-5" />
                </span>
                <div>
                  <p className="text-[15px] font-semibold text-neutral-950 dark:text-white">You're all set</p>
                  <p className="text-[13px] text-neutral-500">Northwind is ready. Your team will get their invites in a minute.</p>
                </div>
              </div>
            ) : (
              <>
                <p className="text-[15px] font-semibold text-neutral-950 dark:text-white">{BODY[s.step][0]}</p>
                <p className="mt-1 text-[13px] text-neutral-500">{BODY[s.step][1]}</p>
                <div className="mt-4 h-9 w-full max-w-[320px] rounded-[10px] bg-white ring-1 ring-black/[0.08] dark:bg-white/[0.04] dark:ring-white/[0.1]" />
              </>
            )}
          </motion.div>
        </AnimatePresence>
      </div>
      <div className="mt-5 flex items-center justify-between">
        <button type="button" onClick={s.isDone ? () => s.setStep(0) : s.back} disabled={s.isFirst} className="h-9 rounded-[10px] px-3.5 text-[13px] font-medium text-neutral-700 outline-none ring-1 ring-black/[0.1] hover:bg-neutral-50 focus-visible:bg-neutral-100 disabled:opacity-40 dark:text-neutral-200 dark:ring-white/[0.12] dark:hover:bg-white/[0.05]">
          {s.isDone ? "Start over" : "Back"}
        </button>
        <div className="flex gap-2">
          {STEPS[s.step]?.optional && (
            <button type="button" onClick={s.next} className="h-9 rounded-[10px] px-3.5 text-[13px] font-medium text-neutral-500 outline-none hover:bg-neutral-950/[0.04] hover:text-neutral-900 dark:hover:bg-white/[0.06] dark:hover:text-white">
              Skip
            </button>
          )}
          {!s.isDone && (
            <button type="button" onClick={s.next} className="h-9 rounded-[10px] bg-neutral-950 px-4 text-[13px] font-medium text-white outline-none hover:bg-neutral-800 focus-visible:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200">
              {s.isLast ? "Finish" : "Continue"}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

31:T7d3,"use client"; import { Copy } from "lucide-react"; import { Stepper, useStepper } from "@/components/scalar-ui/stepper"; function Next({ onClick, label = "Continue" }: { onClick: () => void; label?: string }) { return ( ); } export default function Example() { const s = useStepper(4, 1); const steps = [ { title: "Add your domain", description: "northwind.co" }, { title: "Add a DNS record", description: "At your DNS provider", content: (

Type TXT Name _verify Value nw-site-verify=8f2c41

), }, { title: "Verify", description: "Usually under a minute", content: }, { title: "Go live", description: "Point traffic at the new domain", content: }, ]; return (

); } 32:T4998,

"use client";

import { Copy } from "lucide-react";
import { Stepper, useStepper } from "@/components/scalar-ui/stepper";

function Next({ onClick, label = "Continue" }: { onClick: () => void; label?: string }) {
  return (
    <button type="button" onClick={onClick} className="mt-3 h-8 rounded-[9px] bg-neutral-950 px-3 text-[12.5px] font-medium text-white outline-none hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200">
      {label}
    </button>
  );
}

export default function Example() {
  const s = useStepper(4, 1);
  const steps = [
    { title: "Add your domain", description: "northwind.co" },
    {
      title: "Add a DNS record",
      description: "At your DNS provider",
      content: (
        <div>
          <div className="grid grid-cols-[64px_1fr] gap-x-3 gap-y-1.5 rounded-[12px] bg-neutral-50 p-3 font-mono text-[12px] ring-1 ring-black/[0.05] dark:bg-white/[0.04] dark:ring-white/[0.06]">
            <span className="text-neutral-400">Type</span>
            <span className="text-neutral-900 dark:text-white">TXT</span>
            <span className="text-neutral-400">Name</span>
            <span className="text-neutral-900 dark:text-white">_verify</span>
            <span className="text-neutral-400">Value</span>
            <span className="flex items-center gap-2 text-neutral-900 dark:text-white">
              nw-site-verify=8f2c41
              <Copy className="size-3 text-neutral-400" />
            </span>
          </div>
          <Next onClick={s.next} label="I've added it" />
        </div>
      ),
    },
    { title: "Verify", description: "Usually under a minute", content: <Next onClick={s.next} label="Check now" /> },
    { title: "Go live", description: "Point traffic at the new domain", content: <Next onClick={s.next} label="Finish" /> },
  ];
  return (
    <div className="w-[min(100%,380px)]">
      <Stepper orientation="vertical" steps={steps} current={s.step} onStepClick={s.setStep} />
    </div>
  );
}

33:T823,"use client"; import { AnimatePresence, motion } from "motion/react"; import { Stepper, useStepper } from "@/components/scalar-ui/stepper"; const SLIDES = [ ["Plan together", "Boards, docs and chat in one place, so nothing gets lost between tools."], ["Ship on time", "Due dates and owners on every task, with a heads-up before things slip."], ["See the whole picture", "Roadmaps roll up every project so you know what's next."], ]; export default function Example() { const s = useStepper(SLIDES.length); const i = Math.min(s.step, SLIDES.length - 1); return (

{SLIDES[i][0]}

{SLIDES[i][1]}

({ title: t }))} current={i} onStepClick={s.setStep} />

); } 34:T498f,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { Stepper, useStepper } from "@/components/scalar-ui/stepper";

const SLIDES = [
  ["Plan together", "Boards, docs and chat in one place, so nothing gets lost between tools."],
  ["Ship on time", "Due dates and owners on every task, with a heads-up before things slip."],
  ["See the whole picture", "Roadmaps roll up every project so you know what's next."],
];

export default function Example() {
  const s = useStepper(SLIDES.length);
  const i = Math.min(s.step, SLIDES.length - 1);
  return (
    <div className="w-[min(100%,360px)] rounded-[22px] bg-white p-6 text-center shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-16px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div className="mx-auto mb-5 h-28 w-full rounded-[16px] bg-[repeating-linear-gradient(135deg,rgb(0_0_0/0.03)_0_8px,transparent_8px_16px)] ring-1 ring-black/[0.05] dark:bg-[repeating-linear-gradient(135deg,rgb(255_255_255/0.04)_0_8px,transparent_8px_16px)] dark:ring-white/[0.06]" />
      <AnimatePresence mode="wait" initial={false}>
        <motion.div key={i} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -6 }} transition={{ duration: 0.2 }} className="min-h-[76px]">
          <p className="text-[16px] font-semibold text-neutral-950 dark:text-white">{SLIDES[i][0]}</p>
          <p className="mt-1 text-[13px] text-neutral-500">{SLIDES[i][1]}</p>
        </motion.div>
      </AnimatePresence>
      <div className="mt-4 flex items-center justify-between">
        <Stepper variant="dots" steps={SLIDES.map(([t]) => ({ title: t }))} current={i} onStepClick={s.setStep} />
        <button type="button" onClick={() => (s.isLast ? s.setStep(0) : s.next())} className="h-8 rounded-[9px] bg-neutral-950 px-3.5 text-[12.5px] font-medium text-white outline-none hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200">
          {s.isLast ? "Get started" : "Next"}
        </button>
      </div>
    </div>
  );
}

35:T544,"use client"; import { ChevronLeft } from "lucide-react"; import { Stepper, useStepper } from "@/components/scalar-ui/stepper"; const STEPS = [{ title: "Your details" }, { title: "Delivery" }, { title: "Payment" }, { title: "Review" }]; export default function Example() { const s = useStepper(STEPS.length, 1); return (

); } 36:T2de8,

"use client";

import { ChevronLeft } from "lucide-react";
import { Stepper, useStepper } from "@/components/scalar-ui/stepper";

const STEPS = [{ title: "Your details" }, { title: "Delivery" }, { title: "Payment" }, { title: "Review" }];

export default function Example() {
  const s = useStepper(STEPS.length, 1);
  return (
    <div className="w-[min(100%,360px)] rounded-[22px] bg-white p-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div className="mb-4 flex items-center gap-2">
        <button type="button" aria-label="Back" onClick={s.back} disabled={s.isFirst} className="flex size-8 items-center justify-center rounded-full text-neutral-600 outline-none hover:bg-neutral-950/[0.05] disabled:opacity-30 dark:text-neutral-300 dark:hover:bg-white/[0.08]">
          <ChevronLeft className="size-4" />
        </button>
        <Stepper variant="compact" steps={STEPS} current={s.step} className="flex-1" />
      </div>
      <button type="button" onClick={() => (s.isLast ? s.setStep(0) : s.next())} className="h-10 w-full rounded-[12px] bg-neutral-950 text-[13.5px] font-medium text-white outline-none hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200">
        {s.isLast ? "Place order" : "Continue"}
      </button>
    </div>
  );
}

37:T164d,

"use client";

import { Stepper } from "@/components/scalar-ui/stepper";

const STEPS = [
  { title: "Upload", description: "contacts.csv" },
  { title: "Map columns", description: "2 columns unmapped" },
  { title: "Review", description: "1,204 rows", optional: true },
  { title: "Import" },
];

export default function Example() {
  return (
    <div className="w-[min(100%,640px)]">
      <Stepper steps={STEPS} current={2} errors={[1]} />
    </div>
  );
}

29:["$","section","stepper",{"id":"stepper","aria-labelledby":"stepper-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"stepper-title","className":"sr-only","children":"Stepper"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"stepper","gated":{"unlocked":true,"files":[{"name":"stepper.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"vertical":{"name":"vertical.tsx","code":"$31","html":"$32"},"dots":{"name":"dots.tsx","code":"$33","html":"$34"},"compact":{"name":"compact.tsx","code":"$35","html":"$36"},"with-error":{"name":"with-error.tsx","code":"\"use client\";\n\nimport { Stepper } from \"@/components/scalar-ui/stepper\";\n\nconst STEPS = [\n { title: \"Upload\", description: \"contacts.csv\" },\n { title: \"Map columns\", description: \"2 columns unmapped\" },\n { title: \"Review\", description: \"1,204 rows\", optional: true },\n { title: \"Import\" },\n];\n\nexport default function Example() {\n return (\n

\n \n

\n );\n}\n","html":"$37"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add stepper","shadcn":"npx shadcn@latest add https://scalarui.com/r/stepper.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L38","toolbar":"$L39"}]}],["$L3a","$L3b","$L3c","$L3d"]]}]

Steppers

Steppers

Vertical

Dots

Compact

With Error