Guided steps
A short choice flow that shows progress, preserves answers, and confirms completion.
Setup guideStep 1 of 3
Shape your workspace.
A few quick choices help the library feel closer to your team.
Implementation
1"use client";2 3import { useId, useState } from "react";4import { ArrowLeft, ArrowRight, Check, RotateCcw } from "lucide-react";5 6export type GuidedChoice = { value: string; label: string; detail?: string };7export type GuidedStep = {8 id: string;9 title: string;10 description: string;11 choices?: GuidedChoice[];12};13export type GuidedStepsProps = {14 steps: GuidedStep[];15 onComplete?: (answers: Record<string, string>) => void;16 completeTitle?: string;17};18 19/** Short, data-driven step flow with reviewable choices and completion state. */20export function GuidedSteps({21 steps,22 onComplete,23 completeTitle = "You’re ready to begin.",24}: GuidedStepsProps) {25 const id = useId();26 const [index, setIndex] = useState(0);27 const [answers, setAnswers] = useState<Record<string, string>>({});28 const [complete, setComplete] = useState(false);