// Navigation

Steps

Steps in a wizard-like format.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/steps

// Usage

1import { Steps, StepsList, StepsItem, StepsTrigger } from "@/components/ui/steps";
2
3<Steps />

// Code

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { Steps as ArkSteps, useStepsContext } from "@ark-ui/react/steps";
5import { CheckIcon } from "lucide-react";
6import type React from "react";
7import { cn } from "@/lib/utils";
8
9export const useSteps = useStepsContext;
10
11export const Steps = (props: React.ComponentProps<typeof ArkSteps.Root>) => {
12  const { className, ...rest } = props;
13
14  return (
15    <ArkSteps.Root
16      className={cn(
17        "flex flex-col gap-4",
18        "data-[orientation=vertical]:min-h-32 data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-8",
19        className
20      )}
21      data-slot="steps"
22      {...rest}
23    />
24  );
25};
26
27export const StepsList = (
28  props: React.ComponentProps<typeof ArkSteps.List>

// Dependencies

@ark-ui/react lucide-react