Signature Pad

Pro

Signature pad with smooth finger-drawn strokes, undo and clear. Signing replays your strokes in colour and adds a date stamp, and the signature exports as a crisp image.

Preview

Installation

npx @lumioui/cli add pro/signature-pad

Usage

import { smoothStrokePath, SignaturePad } from "@/components/ui/signature-pad/signature-pad";
<SignaturePad />

Also exported: smoothStrokePath.

API reference

Prop Type Default
strokes SignatureStroke[]

Controlled strokes.

 —
onChange (strokes: SignatureStroke[]) => void

Fires after every committed stroke / undo / clear.

 —
onSign (result: SignatureResult) => void

Fires on the confirm button or ref.sign() — gets the export payload.

 —
signerName string

Pinned under the baseline guide; once signed it reads "Name · signed 14:02".

 —
confirmLabel string

Confirm button label (default "Sign"). Rendered only when onSign is set.

 "Sign"
signedLabel string

Confirm button label once signed (default "Signed").

 "Signed"
collapseOnSign boolean

After the signed hold, fold the pad into a 64pt signed strip. Default false.

 false
penColor string

Ink color — defaults to the theme foreground.

 —
strokeWidth number

Stroke width (default 2.5).

 2.5
disabled boolean —
className string —