Drawn Capsule Stepper

A multi-step flow packed into a single capsule. On entry a stroke starts at the middle of the left edge and draws the capsule outline clockwise; once it is done, the step pills inside fade in one by one. As the flow advances, completed steps fill with the accent colour and draw a white check, the active step carries a subtle breathing halo, and a second accent stroke travels along the outline to the completed ratio — the outline itself is a progress bar. In compact mode only the active step expands to show its label; the rest keep just an icon or number. The step index supports controlled and uncontrolled modes, and can advance on its own.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<DrawnCapsuleStepper/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/drawn-capsule-stepper.en.json

Usage

import { Package, Rocket, Store } from "lucide-react";
import { DrawnCapsuleStepper } from "@/components/ui/drawn-capsule-stepper";

const steps = [
  { id: "create", label: "Create shop", icon: <Store /> },
  { id: "upload", label: "Add products", icon: <Package /> },
  { id: "launch", label: "Open for business", icon: <Rocket /> },
];

// Uncontrolled + auto-advance
<DrawnCapsuleStepper steps={steps} autoPlay />

// Controlled: drive the current step from outside buttons
const [current, setCurrent] = React.useState(0);

<DrawnCapsuleStepper
  steps={steps}
  current={current}
  onCurrentChange={setCurrent}
  compact={false}
  clickable
/>

Props

DrawnCapsuleStep

How it works

• The outline is a hand-built capsule <path> (corner radius = half the height) rather than <rect rx>, so the stroke can start at the middle of the left edge and run clockwise. The container is measured with ResizeObserver, and the path is recomputed when the width changes.
• The stroke draws via pathLength 0→1 with the easing [0.65, 0, 0.35, 1]; afterwards the step pills fade in with a 60ms stagger. Only then does the progress stroke start, following the same path on a spring (stiffness 120, damping 20) to "completed ÷ total steps".
• The active step's width change expands with a layout animation, and the white check on completed steps draws in over 240ms.
• CSS variables: --wb-drawn-capsule-draw (default 900ms, same as drawDuration), --wb-drawn-capsule-stagger (60ms) and --wb-drawn-capsule-accent (same as accent); override the colour on a parent to match your theme.
• autoPlay starts timing only after the draw and fade-in finish; once every step is complete it waits one more interval before returning to the first step.

Accessibility

• The step container is role="list" with aria-label="Setup progress", and each step is role="listitem"; the active step sets aria-current="step"
• Completed steps carry screen-reader-only "completed" text; labels hidden in compact mode are kept as sr-only text so no step loses its name
• With clickable, completed steps are native type="button" buttons — focusable with Tab, triggered with Enter or Space, with a focus-visible ring
• Step changes are written to an aria-live="polite" region, e.g. "Step 2 of 4: Add products"
• The outline SVG, icons, numbers and pulsing halo are all aria-hidden
• When the user's system has reduce motion enabled, the outline appears immediately, the progress stroke jumps straight to its target, and the steps neither fade in nor pulse