Signature Pad

Copy Markdown

Capture hand-drawn signatures.

PreviewCode

Signature

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/signature-pad

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.

PreviewCode

Signature

Image preview

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

PreviewCode

Signature

Draw your signature in the box above

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.

[

Sidebar ](/docs/components/sidebar)[

Skeleton ](/docs/components/skeleton)

On This Page