Signature Pad React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Signature Pad is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import SignaturePad from @/components/ui/signature-pad.

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { SignaturePad, isSignatureEmpty, type SignatureData, type SignaturePadApi } from "@/components/ui/signature-pad"

export function ConfirmDelivery() {
  const [signature, setSignature] = useState<SignatureData | null>(null)
  const [api, setApi] = useState<SignaturePadApi | null>(null)

  const confirm = async () => {
    const png = await api?.toBlob()
    if (png) console.log("Signature", png.size, "bytes")
  }

  return (
    <div className="flex max-w-md flex-col gap-4">
      <SignaturePad
        label="Recipient signature"
        description="Sign with your finger or mouse"
        required
        value={signature}
        onValueChange={setSignature}
        setApi={setApi}
        placeholder="Sign here"
        fileName="Recipient signature"
      />
      <Button size="lg" disabled={isSignatureEmpty(signature)} onClick={confirm}>
        Confirm delivery
      </Button>
    </div>
  )
}

Props

• value
  SignatureData | null ({ kind: "drawn"; strokes: SignatureStroke[]; width: number; height: number } | { kind: "typed"; text: string; font: string })

  The controlled signature; null when empty. Drawn strokes are in css px of a width x height box and are scaled by width when shown at another size, so a signature saved on a phone fits a desktop pad.

• defaultValuedefault "null"
  SignatureData | null

  The uncontrolled start, for example a saved signature. A form reset puts it back.

• onValueChange
  (value: SignatureData | null) => void

  Fires when a stroke ends (never per point), after undo and clear, when the mode switches and as you type.

• onEnd
  () => void

  A stroke finished.

• modesdefault "["draw", "type"]"
  SignatureMode[] ("draw" | "type")

  The ways to sign. With one entry the Draw / Type switch is hidden. Type is the keyboard and screen reader path, so keep it unless another one exists.

• mode
  "draw" | "type"

  The controlled mode. A typed value from outside switches to type, a drawn one to draw.

• onModeChange
  (mode: SignatureMode) => void

  The person switched between Draw and Type.

• defaultModedefault "draw"
  "draw" | "type"

  The uncontrolled starting mode. Each mode keeps its own draft, so switching back restores the strokes or the name.

• labeldefault ""
  ReactNode

  The field label. It names the drawing area (aria-labelledby) and becomes the name field's label in type mode; a click on it focuses the pad.

• descriptiondefault ""
  ReactNode

  Helper text under the pad, linked with aria-describedby. The error takes its place while it shows.

• errordefault ""
  ReactNode

  Replaces the description with the animated error, rings the surface red and sets aria-invalid.

• placeholderdefault "Sign here"
  string

  Centered in the empty surface above the baseline; fades out with the first stroke. Empty shows nothing.

• variantdefault "outline"
  "soft" | "outline"

  outline is a dashed 2px zone (a signing area reads as a place to act), soft is the filled field look for forms full of soft inputs.

• sizedefault "md"
  "sm" | "md" | "lg"

  The label, the typed name field (32 / 40 / 48px) and the switch and toolbar buttons (lg gets 40px buttons).

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The surface corners: none, 12px, 16px (md), 24px; full falls back to 24px. The name field takes the same radius.

• heightdefault 200
  number

  Surface height in px; the width is the container's. 200 fits a phone, 240 is roomy for couriers.

• penColordefault "currentColor"
  string

  The ink on screen. currentColor reads the surface's text color (the foreground token, so white ink in dark mode) and repaints on theme changes; set classNames.surface to a text color class for a themed ink. Strokes drawn with a custom color keep it.

• exportColordefault "#111111"
  string

  The ink in every export, whatever the theme: dark ink on a transparent background reads on any document. #1F3A93 is a classic blue pen.

• minWidthdefault 0.8
  number

  The thinnest stroke in px, reached on fast movements (signature_pad).

• maxWidthdefault 2.8
  number

  The thickest stroke in px, reached on slow movements and dots.

• velocityFilterWeightdefault 0.7
  number

  How much the previous speed smooths the next width, 0 to 1 (signature_pad). Higher is calmer ink.

• guidedefault true
  boolean

  A dashed baseline at 72% of the height with a × at its start, where people expect to sign.

• typedFontdefault ""Segoe Script", "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive"
  string

  The typed signature's font stack. System fonts only, nothing downloads; exports use the same stack. Exported as DEFAULT_SIGNATURE_FONT for rendering a typed signature elsewhere (a PDF, an email).

• showToolbardefault true
  boolean

  Undo and Clear at the top corner of the drawing area, shown once there is ink (type mode clears from the name field). Off when your own buttons do it through the api.

• trimExportdefault true
  boolean

  Exports crop to the signature's bounds plus 12px of padding. Off keeps the full pad box, the signature where it was drawn.

• fileNamedefault "signature"
  string

  The base name for api.download(), with the local date and time appended ("Signature-2026-09-24-1640.png").

• setApi
  (api: SignaturePadApi) => void

  Called after mount and whenever the export settings change. SignaturePadApi: clear(), undo(), isEmpty(), getValue(), toBlob({ type, quality, trim, padding = 12, scale = 2, background, color }), toSVG({ trim, padding, background, color }), toDataURL(type = "image/png" | "image/svg+xml"), download({ format = "png" | "svg", ...toBlob options }) resolving with the file name.

• requireddefault false
  boolean

  The red mark after the label and aria-required. The check itself belongs to your form: isSignatureEmpty(value), exported by the file, is true for null, no strokes or a blank typed name.

• invaliddefault false
  boolean

  The invalid look (a red ring and a red dashed border) and aria-invalid without a message.

• disableddefault false
  boolean

  Dims to 50%, the pen stops listening, no toolbar, the switch and the name field are disabled.

• readOnlydefault false
  boolean

  Shows the signature as an image (role="img", named by the label and, for a typed one, the name) without the switch, the name field or the toolbar.

• namedefault ""
  string

  Form field name: a hidden input carries the signature as a PNG data url (export color, trimmed), updated after each stroke. A form reset puts defaultValue back.

• id
  string

  The drawing area's id (the name field's in type mode). Defaults to useId(); the label points at it.

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional, labelAction, orientation, labelWidth, hideLabel.

• labels
  Partial<SignaturePadLabels>

  Every visible and announced string: draw, type, modes, typePlaceholder, undo, clear, canvas, canvasHint, signature, added, undone, cleared, empty, downloaded(fileName). English defaults in DEFAULT_SIGNATURE_PAD_LABELS.

• classNames
  Partial<Record<"root" | "modes" | "surface" | "canvas" | "typed" | "input" | "preview" | "guide" | "placeholder" | "toolbar" | "button" | "field" | "label" | "description" | "error" | "counter", string>>

  Extra classes for the inner parts. A text color on surface is the on-screen ink when penColor is currentColor.

Parts

FAQ

More React input components