caliper uidocs
DemoSign inGet Pro

Signature pad

Free

Draw a signature with a pointer or finger, with undo and clear.

Installs components/ui/signature-pad.tsxDepends on none beyond ReactMotion shared motion tokens
pnpm dlx shadcn@latest add https://caliperui.site/r/signature-pad.json

Signature

Sign in the frame.

Sign above to continue.

When to use #

Use it for

  • Agreements and approvals that need a drawn signature.
  • Touch and pen devices.

Skip it when

  • A typed name is legally enough; use an input.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/signature-pad.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { SignaturePad } from "@/components/ui/signature-pad"

export function AgreementSignature() {
  const [empty, setEmpty] = useState(true);
  return (
    <div className="grid w-full max-w-sm gap-2">
      <SignaturePad label="Signature" onChange={setEmpty} />
      <p className="text-sm text-muted-foreground">{empty ? "Sign above to continue." : "Signature captured."}</p>
    </div>
  );
}

API reference #

SignaturePad

component
PropTypeDefault
labelstring"Signature"
onChange((empty: boolean) => void)—
classNamestring—

Accessibility #

It exposes img and status semantics, with aria-roledescription and aria-label kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.