KQ-495 · SIGNATURE/PAD

Signature Pad

An SVG pad whose ink remembers the pen. Each sample's nib width comes from the speed since the last one, smoothed so the line eases rather than flickers — a fast flourish thins, a slow stop pools — and every stroke is a filled ribbon revealed through a mask that runs along the pen's own path. That is what lets Clear rewind instead of blink: each stroke un-writes on glide, last one first, cascade() apart, while Undo lifts a single stroke away on a fade. Pointer capture is claimed only after 4px of travel so a tap stays a tap, and the keyboard path is a real typed-signature input announced as an equal way to sign.

KQ-495 · SIGNATURE/PAD

Coldbrook delivery 4417 — sign for the drop, or type your name.

Received by

Or type your name to sign

The pad takes a pointer only. A typed name signs just as well.

0 strokes · unsigned

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/signature-pad

Props

onChange: (strokes: { points: [number, number][]; widths: number[] }[]) => void; default —; Every stroke, after each change — the points and the nib width recorded at each of them.
onTypedChange: (typed: string) => void; default —; Fires with the typed-signature fallback's text, so a form can accept either way of signing.
penColor: string; default "currentColor"; CSS colour for the ink; inherits the pad's text colour by default, so it reads in both themes.
height: number; default 160; Pad height in px; the width fills the container.
label: string; default —; Caption above the pad; it names the whole group, controls included.
allowTyped: boolean; default true; Offers the typed-signature fallback below the pad.

Prop	Type	Default	Description
onChange	(strokes: { points: [number, number][]; widths: number[] }[]) => void	—	Every stroke, after each change — the points and the nib width recorded at each of them.
onTypedChange	(typed: string) => void	—	Fires with the typed-signature fallback's text, so a form can accept either way of signing.
penColor	string	"currentColor"	CSS colour for the ink; inherits the pad's text colour by default, so it reads in both themes.
height	number	160	Pad height in px; the width fills the container.
label	string	—	Caption above the pad; it names the whole group, controls included.
allowTyped	boolean	true	Offers the typed-signature fallback below the pad.