); } `,__src__:"registry/default/examples/stepper-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Stepper } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/stepper"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" StepperDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"currentStep"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setCurrentStep"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" numberOfSteps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 5"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-full flex flex-col gap-10 justify-center"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Stepper"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" currentStep"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{currentStep} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"numberOfSteps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{numberOfSteps} />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex gap-2 justify-center"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" setCurrentStep"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(currentStep "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{currentStep "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Previous"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Button"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"outline"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" setCurrentStep"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(currentStep "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{currentStep "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" numberOfSteps "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Next"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(d,{defaultValue:"cli",children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stepper.json" `,__npmCommand__:`npx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stepper.json" `,__yarnCommand__:`npx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stepper.json" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stepper.json" `,__bunCommand__:`bunx --bun shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/stepper.json" `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "https://akasha-ui.pages.dev/r/styles/default/stepper.json"'})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(r,{children:"Install the following dependencies:"}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install lucide-react `,__npmCommand__:`npm install lucide-react `,__yarnCommand__:`yarn add lucide-react `,__pnpmCommand__:`pnpm add lucide-react `,__bunCommand__:`bun add lucide-react `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" lucide-react"})]})})})}),(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(a,{name:"stepper",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react"; import { Check, Dot } from "lucide-react"; import { cn } from "@/lib/utils"; const Stepper = ({ currentStep, numberOfSteps, className, ...props }: React.ComponentProps<"nav"> & { currentStep: number; numberOfSteps: number; }) => { return (

{!isLast && (

); }; export { Stepper }; `,__src__:"registry/default/ui/stepper.tsx",__style__:"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Check, Dot } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" Stepper"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" currentStep,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" numberOfSteps,"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" className,"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ComponentProps"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"nav"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"> "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:" currentStep"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:" numberOfSteps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"nav"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" data-slot"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"stepper"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"w-full"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Progress"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"ol"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center justify-between"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {["}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Array"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(numberOfSteps)]."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"_"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"index"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" stepNumber"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" index "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" isActive"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" stepNumber "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" currentStep;"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" isCompleted"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" stepNumber "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" currentStep;"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" isLast"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" index "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" numberOfSteps "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" completedStyle"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isCompleted"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ?"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "border-primary bg-primary"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "border-muted bg-transparent"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"li"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{stepNumber}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"isLast "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "flex-1"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" aria-current"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{isActive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "step"'}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" undefined"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"isLast "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&&"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "absolute left-8 top-1/2 h-0.5 w-[calc(100%-32px)] -translate-y-1/2 transition-colors duration-300"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isCompleted "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "bg-primary"'}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "bg-muted"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" aria-hidden"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"true"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "relative flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all duration-300"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isActive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "border-primary bg-transparent"'}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" completedStyle"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`Step ${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"stepNumber"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {isCompleted "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Check"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"20"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"text-primary-foreground transition-colors duration-300"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Dot"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"20"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"8"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isActive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "text-primary"'}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" :"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "text-muted"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "transition-colors duration-300"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })}"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Stepper };"})]})]})})})}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Stepper } from "/stepper"; `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Stepper } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "/stepper"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]})})})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Stepper"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" currentStep"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"numberOfSteps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"5"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} />"})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"props",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,l.jsxs)(e.table,{children:[(0,l.jsx)(e.thead,{children:(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.th,{children:"Name"}),(0,l.jsx)(e.th,{children:"Type"}),(0,l.jsx)(e.th,{children:"Description"})]})}),(0,l.jsxs)(e.tbody,{children:[(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"currentStep"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:"number"})}),(0,l.jsx)(e.td,{children:"Current step."})]}),(0,l.jsxs)(e.tr,{children:[(0,l.jsx)(e.td,{children:"numberOfSteps"}),(0,l.jsx)(e.td,{children:(0,l.jsx)(e.code,{children:"number"})}),(0,l.jsx)(e.td,{children:"Total number of steps."})]})]})]})]})}function u(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(F,{...n})}):F(n)}function c(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(k);})(); ;return Component;

Name	Type	Description
currentStep	`number`	Current step.
numberOfSteps	`number`	Total number of steps.