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.
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.
Integrating With Other Components
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.
Frequently Asked Questions
Does the signature pad work on phones and tablets?
How is this different from a canvas signature library?
How do I send the signature to my server?
Why is the exported image black when my UI is dark?
Can the signature be read-only after signing?
Is a drawn signature legally binding?
What happens when the pad is resized?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.