Signature Pad
Canvas signature pad using pointer events with undo, clear, pen color/width and PNG download.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
SignaturePadProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| inks | SignatureInk[] | — | — |
| defaultWidth | number | — | — |
| exportBackground | string | null | — | Background painted into the exported PNG. Pass null for a transparent PNG. |
| filename | string | — | File name used by the download button |
| onExport | (dataUrl: string) => void | — | Called with the PNG data URL when the download button is pressed |
| onChange | (isEmpty: boolean) => void | — | Called whenever the signature becomes empty or non-empty |
| hint | string | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/signature-pad.json