Shadcn Signature Pad: Touch, Stylus, Forms and Export

Browse 12 shadcn signature pad components with pressure-aware ink, touch and stylus input, undo and redo, native form fields and PNG, JPEG, SVG or JSON export.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Contracts, agreements and statements of work signed in place, down to initials per clause
Required form fields, proof of delivery on a phone and a profile signature reused on documents
Mouse, finger or stylus ink exported as PNG, JPEG, SVG or JSON, or uploaded as an image Blob

When not to use

A sign in or sign up page where people type an email and a password: use the Auth blocks
A scanned or photographed mark the signer already has as an image: use the File Upload component
A whole data entry page of typed fields with nothing drawn by hand: use the Form blocks

Agent notes

Image exports draw ink with no color of its own in black, on a transparent background except jpeg; pass background for paper white
readOnly locks a signed pad at full ink strength while disabled dims it; both stop input and drop the area from the tab order
With name set, keep format as svg or json; png and jpeg rasterize the hidden form field after every stroke

Markdownhttps://web.dev.reui.io/components/signature-pad.md

MCPget_component("signature-pad")

Installnpx shadcn@latest add @reui/signature-pad

Full index for agents:llms.txtReUI MCP setup

Shadcn Signature Pad: Capture, Validate and Export

ReUI Signature Pad is a custom shadcn component for capturing a handwritten signature with a mouse, a finger or a stylus. It is not part of the base shadcn/ui library, and its only dependencies are the shadcn Button and the cn utility.

Ink is drawn as SVG, so it stays sharp at any zoom and follows the theme's text color in dark mode. Width follows pen pressure on a stylus and drawing speed on a mouse or a finger, which is what makes a signature look written rather than traced.

12 components cover the flows a product actually ships: a form field that submits with a native form, an agreement card that locks once signed, a dialog that saves a reusable signature, per-clause initials, proof of delivery on a phone, and export to 4 formats.

What is Shadcn Signature Pad?

A signature pad is a drawing surface scoped to one job: turning a pointer gesture into a signature you can store, verify and print. Shadcn Signature Pad is 10 composable parts and a useSignaturePad hook. The root holds the strokes and the history, the area is the surface, and a guide, a placeholder and the controls are children you place where your design wants them.

The value is plain data: an array of strokes, each a list of points with a position and an ink width. Store that JSON to redraw or edit a signature later, or export it once to an image for a PDF, an email or a receipt.

Touch, stylus and palm rejection

The area blocks page scrolling and the long-press menu while a finger is on it, so signing on a phone never drags the page. It captures the pointer, so a stroke that leaves the pad keeps drawing until the finger lifts, and it reads coalesced pointer samples, so a fast stylus draws round curves instead of straight segments.

Only the first touch draws, so a pinch or a second finger leaves no mark. A pen that lands during a touch stroke discards the touch as a resting palm, and pointerTypes restricts input to a stylus entirely for tablets where the hand rests on the glass.

Shadcn Signature Pad Features

Pressure and speed sized ink. Stylus strokes take their width from pen pressure, mouse and touch strokes from drawing speed, between a minWidth and a maxWidth you set.
Undo, redo and clear. A 100-step history with ready-made controls and Ctrl+Z, Ctrl+Shift+Z and Ctrl+Y shortcuts. Clearing is undoable like any other edit.
Native form field. Give the root a name and the signature submits with a plain form as a PNG, JPEG or SVG data URL or as JSON, with required and form reset support.
Export to 4 formats. PNG, JPEG, SVG and JSON, cropped to the ink with padding or framed to the whole pad, with a background color, a scale and a Blob for uploads.
Preview anywhere. SignaturePadPreview renders saved strokes as an inline SVG cropped to the ink, with no canvas, so it works on the server and in lists and receipts.
Controlled or uncontrolled. Pass value and onValueChange, or a defaultValue. onValueChange fires once per finished stroke, never per pointer move, so state updates stay cheap.
3 surfaces. A default surface that matches the shadcn Textarea in every style, a muted filled surface, and a ghost surface for cards and documents with their own chrome.
apiRef for outside code. Clear, undo or export from a form library's submit handler or a toolbar outside the pad through the same API the useSignaturePad hook returns.

Accessibility and alternatives

The area is a labelled, focusable application region with a signature pad role description, and it takes aria-invalid and aria-describedby like any form control. A control that disables itself, such as Clear on an emptied pad, hands focus back to the area instead of dropping it on the page.

Drawing is a pointer task, so a form that requires a signature should offer another route to the same outcome. The draw or type component shows the usual component: a tab that accepts the signer's typed name, which is also how screen reader and keyboard users complete the flow.

Wrap the pad in Shadcn Field for a label, a description and an error message, and point the area's aria-labelledby at the label. Pair it with Shadcn Input for the signer's printed name.

Put it in Shadcn Dialog when the signature is saved once and reused, and in Shadcn Card for an agreement that signs in place. Shadcn Tabs switch between drawing and typing a signature.

The Form blocks are the assembled version of a signing flow's surroundings, 12 complete forms with fields, validation and actions. The Signature Pad docs list every prop, part and export option.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

Does the signature pad work on phones and tablets?

Yes. The area disables touch scrolling and the long-press menu while drawing, captures the pointer so strokes continue past the edge, and ignores a second finger. On a tablet, a pen landing during a touch stroke discards the touch as a resting palm.

How is this different from a canvas signature library?

Ink is SVG built from a stroke outline rather than pixels on a canvas. It stays sharp when the page zooms, follows the theme color without a redraw, and exports to SVG losslessly. A canvas is only used at export time, to produce PNG or JPEG.

How do I send the signature to my server?

For a plain form, give SignaturePad a name and a format and it submits with the form. For an upload, call toBlob from the hook or from apiRef and append the Blob to a FormData. Store JSON if you need to redraw or edit the signature later.

Why is the exported image black when my UI is dark?

Exports default to black ink because they usually land on paper, a PDF or a white email. Pass a color in the export options to keep the theme's ink, and a background color to fill the transparent area, which JPEG always does with white.

Can the signature be read-only after signing?

Yes. readOnly keeps the ink visible, stops input and takes the pad out of the tab order, and disabled also dims it. To show a saved signature elsewhere, render SignaturePadPreview with the stored strokes, which needs no pad around it.

Is a drawn signature legally binding?

The component captures the mark. Whether it is binding depends on the process around it: identifying the signer, recording consent and the time, and keeping an audit trail on your server. Those belong to your backend, not to a UI component.

What happens when the pad is resized?

Strokes are stored in pixels from the pad's top-left corner and keep their position when the pad grows or shrinks. Exports crop to the ink by default, so the saved image is the same size whatever the pad measured when it was signed.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.