- Components24
- Autocomplete
- Location Input
- Signature Input
- Signature Pad
- Credit Card
- Masked Input
- Color Picker
- Tag / Token Input
- Emoji Picker
- Transfer List
- Tree Select
- Image Upload / Dropzone
- Cron Expression Builder
- Inline Editable Field
- Sortable List Input
- Schedule / Availability Picker
- Phone Input
- Datetime Picker
- Smart Datetime Input
- File Upload
- Tags Input
- Multi Select
- Password Input
- Rating
Signature Pad
Dialog-based signature capture with hold-to-confirm interaction.
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/r/signature-pad.json
The CLI installs every dependency listed in the registry item.
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} />