Signature Input

Signature form element that saves canvas area as PNG image

Installation

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

Once the component is installed successfully, add the following JSON files to your project. /data/ folder is recommended for better organization.

• Countries JSON
• States JSON

Usage

'use client'

import SignatureInput from '@/components/ui/signature-input'

<SignatureInput
  canvasRef={canvasRef}
  onSignatureChange={field.onChange}
/>

Form