Signature Pad
Handwritten signatures on canvas: pressure-sensitive stroke width, clear and redraw, export to PNG.
A handwritten signature pad built with canvas 2d and Pointer Events: the line width changes live with writing speed (or with a stylus's real pressure) to imitate a fountain pen. Strokes are kept on a stack, supporting stroke-by-stroke undo, one-click clear, and PNG download, plus a dashed signature baseline and a "please sign" watermark.
Loading preview…
npx shadcn@latest add https://webberui.com/r/signature-pad.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
1.5
4
220
<SignaturePad />
Installation
npx shadcn@latest add https://webberui.com/r/signature-pad.jsonOr, once registries are configured in components.json, install it as @webberui/signature-pad.
Usage
import { SignaturePad } from "@/components/ui/signature-pad";
<SignaturePad
height={200}
onChange={(dataUrl) => {
// dataUrl is a PNG dataURL, or null when the canvas is empty
console.log(dataUrl);
}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
strokeColor | string | "currentColor" | Ink colour; by default it reads the container's text colour at the moment the stroke starts, adapting to light and dark themes automatically |
minWidth | number | 1.5 | Thinnest line width during a fast stroke (px) |
maxWidth | number | 4 | Thickest line width during a slow stroke (px) |
height | number | 220 | Height of the signature area (px); the width fills the container automatically |
placeholder | string | "請簽名" | Watermark text shown before any stroke is drawn |
fileName | string | "signature" | File name for the PNG download (without the extension) |
exportBackground | string | "#ffffff" | Background colour of the exported PNG; set "transparent" to output a transparent background |
onChange | (dataUrl: string | null) => void | — | Callback after every stroke ends, undo, or clear; passes null when the canvas is empty |
className | string | — | Forwarded to the outermost container |
Accessibility
- The signature area carries
role="img"andaria-label="手寫簽名區", and the toolbar buttons are nativebuttons with text labels and adisabledstate - It uses Pointer Events with
touch-action: none, so mouse, finger, and stylus all write; a stylus uses its real pressure values - When the user has "reduce motion" enabled at the system level, the watermark transition and the button micro-scale animation are disabled, while the writing functionality is completely unaffected
- A handwritten signature inherently requires a pointing device; in a production form, please also offer an alternative way to consent (for example a checkbox plus a typed name)