Signature Pad

About this component

A canvas for capturing a signature: strokes are smoothed into curves through their midpoints and run thick on slow movement and thin on fast, like ink, or follow real pen pressure on a stylus. Points are stored as fractions of the pad's width, so the signature survives any resize on a crisp, pixel-ratio-correct canvas. A dashed baseline and a faint placeholder guide the signer; undo (also Cmd or Ctrl + Z) and clear sit below. Export helpers return an SVG string or a PNG data URL, and a ref exposes clear, undo, isEmpty and both exports.

Usage

The import and the props worth knowing about, in one place.

import { SignaturePad, toSvg, type SignatureData, type SignaturePadHandle } from "@/components/beste/component/signature-pad";

// Uncontrolled, read it back through the ref
const pad = useRef<SignaturePadHandle>(null);
<SignaturePad ref={pad} label="Signature of Nina Simone" />
console.log(pad.current?.toDataURL());

// Controlled
const [signature, setSignature] = useState<SignatureData>([]);
<SignaturePad
  value={signature}
  onChange={setSignature}
  color="#1e3a8a"       // any CSS color; defaults to the foreground token
  minWidth={0.6}        // px on fast strokes
  maxWidth={3.6}        // px on slow strokes or full pressure
  tone="outline"        // "muted" (default) | "outline" | "ghost"
  size="lg"             // "sm" | "default" | "lg"
/>
console.log(toSvg(signature, { width: 600, height: 200 }));

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

Draw	Mouse, finger or pen. A stylus draws with its real pressure.
Cmd / Ctrl + Z	Undo the last stroke while the pad has focus.

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`value`	`SignatureStroke[]`	—
`defaultValue`	`SignatureStroke[]`	—
`onChange`	`(value: SignatureData) => void`	—	Fires when a stroke ends, and on undo and clear.
`color`	`string`	—	Ink color, any CSS color. Defaults to the foreground token and follows theme switches.
`minWidth`	`number`	—	Thinnest line in px, reached on fast strokes.
`maxWidth`	`number`	—	Thickest line in px, reached on slow strokes or full pen pressure.
`placeholder`	`string`	—	Faint text on the empty pad.
`showBaseline`	`boolean`	—	The dashed line and the × the signer writes on.
`label`	`string`	—	Accessible name of the pad.
`disabled`	`boolean`	—
`size`	`"sm" \| "default" \| "lg"`	—
`tone`	`"muted" \| "outline" \| "ghost"`	—
`className`	`string`	—
`ref`	`React.Ref<SignaturePadHandle>`	—