Sign here
Sign to confirm delivery
The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.
"use client"
import { useState } from "react"
import { SignaturePad } from "@/components/ui/signature-pad"
export function DeliveryConfirmation() {
const [signature, setSignature] = useState("")
return <SignaturePad aria-label="Delivery signature" value={signature} onValueChange={setSignature} format="svg" penColor="currentColor" />
}SignaturePad
A drawing surface for mouse, pen and touch with undo and clear, plus a typed-name fallback for keyboard and screen reader users. Exports SVG markup or a PNG data URL. Pass aria-label.
| Prop | Type | Default |
|---|---|---|
valuestringControlled signature. | string | |
defaultValuestringDefault""Initial value when uncontrolled. | string | "" |
onValueChange(value: string) => voidCalled at the end of each stroke, or an empty string once nothing is signed. | (value: string) => void | |
format"svg" | "png"Default"svg"SVG markup, or a transparent PNG data URL. | "svg" | "png" | "svg" |
penColorstringDefault"currentColor"Any CSS color. currentColor stays in exported SVG so it inherits; other colors are resolved at export. | string | "currentColor" |
namestringSubmits the value through a hidden input. | string | |
placeholderstringDefault"Sign here"Hint shown on the empty pad. | string | "Sign here" |
disabledbooleanDims the pad and ignores pointer input. | boolean |
Other props go to the <div>.
PNG export
format="png" emits a transparent PNG data URL at twice the pad size instead of SVG markup.
Sign here
Saved signature
A value the pad did not draw is shown as an image. Clear removes it so the signer can start again.