Signature Pad

Capture hand-drawn signatures.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/signature-pad.json


import { SignaturePad } from "@/components/ui/signature-pad";


<SignaturePad />

Use the onDrawEnd callback to capture the signature as an image.

The callback receives the getDataUrl(type) method that returns a promise that resolves to a data URL.

Wrap the signature pad in a Field with FieldLabel and FieldHelper for accessible form integration.

Root component. Canvas for drawing signatures. Manages strokes and export.

Prop	Type	Default
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`name`	`string`	-
`onDraw`	`(details: DrawDetails) => void`	-
`onDrawEnd`	`(details: DrawEndDetails) => void`	-
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

On This Page