Components
A reusable SVG path component for drawing handwritten marks and signatures. It self-draws any path with a stroke-dashoffset reveal — configurable path, viewBox, size, stroke width, duration, delay, and easing — and respects reduced-motion preferences. Dependency-free; color follows currentColor.
npx @21st-dev/cli@beta add dqnamo/signatureLoading preview...
"use client";
import { useState } from "react";
import { Signature } from "@/components/ui/signature";
export default function Default() {
const [replayKey, setReplayKey] = useState(0);
return (
<div className="flex min-h-screen w-full items-center justify-center bg-neutral-100 p-8">
<div className="flex w-full max-w-md flex-col gap-3">
<div className="rounded-xl border border-neutral-200 bg-white p-8">
<div className="space-y-3 text-sm leading-relaxed text-neutral-300">
<p>
Ea culpa est cupidatat do magna.{" "}
<span className="text-neutral-400">Lorem nulla enim ipsum</span>{" "}
sit dolor exercitation id ullamco laborum consectetur id magna
sint tempor ad. Amet eu laborum ea eiusmod est commodo minim
dolore cupidatat.
</p>
<p>
Lorem nulla enim ipsum sit dolor exercitation id ullamco laborum
consectetur id magna sint tempor ad.{" "}
<span className="text-neutral-400">Amet eu laborum</span> ea
eiusmod est commodo minim dolore cupidatat.
</p>
</div>
<div className="mt-8 flex justify-center">
<div className="w-44 text-neutral-900">
<Signature duration={2} key={replayKey} strokeWidth={10} />
</div>
</div>
</div>
<div className="flex justify-end">
<button
className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50"
onClick={() => setReplayKey((key) => key + 1)}
type="button"
>
<svg
aria-hidden="true"
className="size-3.5"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6" />
</svg>
Replay
</button>
</div>
</div>
</div>
);
}