Animated Stepper

Renders an animated stepper with step transitions. It shows steps as circles that animate on click or navigation. Use it for multi-step forms or guided processes.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/animated-stepper

npx layro-cli add @educlopez/animated-stepper

npx layro-cli add @educlopez/animated-stepper

bunx layro-cli add @educlopez/animated-stepper

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { type ReactNode, useCallback, useId, useState } from "react";

export interface StepItem {
  content?: ReactNode;
  description?: string;
  icon?: ReactNode;
  label: string;
}

export interface AnimatedStepperProps {