Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Signature Pad for React Radix UI

Capture hand-drawn signatures.

Framework
UI library

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

Signature

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/signature-pad.json

Anatomy

SignaturePad
├── SignaturePadControl
├── SignaturePadSegment
│   └── SignaturePadSegmentPath
├── SignaturePadGuide
├── SignaturePadClearTrigger
└── SignaturePadLabel

Usage

import { SignaturePad } from "@/components/ui/signature-pad";
const SignaturePadDemo = () => <SignaturePad className="w-full max-w-md" />;

Accessibility

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Field

Image Preview

API Reference

SignaturePad

div

PropType
AttributeType

SignaturePadControl

div

PropType
AttributeType

SignaturePadSegment

svg

PropType
AttributeType

SignaturePadGuide

div

PropType
AttributeType

SignaturePadClearTrigger

button

PropType
AttributeType

useSignaturePad

PropType