Signature Pad
NewPro
A canvas to sign on, with a line that thickens as the pen slows, undo and clear, a typed alternative for keyboard users, and export to a data URL.
Customize
Play a sample signature
4px
Signing line
#ff784f
When to use it
- Signing a contract or a publishing agreement in a form
- Delivery or attendance confirmation on a phone or tablet
- Consent forms that need a signature on file
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 757
Installation
Signature Pad is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy signature-pad.tsx into components/ui.
Usage
import { SignaturePad } from "@/components/ui/signature-pad";
<SignaturePad
label="Your signature"
name="signature"
required
exportColor="#171412"
onChange={setSignature}
/>Props
22 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | string | null | — | Controlled signature as a data URL. null clears the pad. |
| defaultValue | string | null | null | Saved image to start from when uncontrolled. |
| onChange | (dataUrl: string | null) => void | — | Called with a data URL when a stroke ends, or null when the pad is cleared. |
| defaultStrokes | SignatureData | — | Vector strokes drawn on mount. |
| color | string | "#ff784f" | Ink color on the pad. |
| exportColor | string | color | Ink color in the exported image, such as a dark ink for white documents. |
| exportBackground | string | — | Background of the exported image. Transparent by default, white for JPEG. |
| exportType | "image/png" | "image/jpeg" | "image/webp" | "image/png" | Format of the exported image. |
| minWidth | number | 1 | Line width in pixels when the pen moves fast. |
| maxWidth | number | 4.2 | Line width in pixels when the pen moves slowly. A pen with pressure uses its pressure instead. |
| height | number | 200 | Pad height in pixels. The width follows the container. |
| guide | boolean | true | Shows the signing line and the prompt. |
| prompt | string | "Sign here" | Text on the empty pad. |
| toolbar | boolean | true | Shows undo, clear and the typed signature switch. |
| label | string | — | Visible label above the pad. |
| hint | string | — | Helper text under the pad. |
| disabled | boolean | false | Blocks drawing and leaves the field out of form data. |
| required | boolean | — | Native form validation: the form won't submit until the pad is signed. |
| name | string | — | Form field name. Submits the data URL. |
| id | string | — | Base id. |
| ref | Ref<SignaturePadHandle> | — | clear(), undo(), isEmpty(), toDataURL(type, quality), toData() and play(data). |
| className | string | — | Extra classes for the wrapper. |