signature pad

Signature Pad with Dialog

Signature Pad

Dialog-based signature capture with hold-to-confirm interaction.

Preview

Features

  • Inline preview after signing.
  • Touch and mouse drawing with smoothing.
  • Hold-to-confirm flow to reduce accidental submissions.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/signature-pad.json

Registry JSON: /registry/signature-pad.json

Usage

import * as React from 'react'
import SignaturePad from '@/components/ui/signature-pad'


const [signature, setSignature] = React.useState<string | null>(null)


<SignaturePad value={signature} onChange={setSignature} />