Signature Pad
Draw a signature with pressure-smoothed strokes; undo the last stroke, clear, or type your name instead.
signature-pad.tsxsignature-pad.css
Checking access…
Overview
Strokes are smoothed with quadratic curves and thin out with speed, so they look like ink rather than polylines. Undo removes one stroke at a time.
A Type tab renders the name in a script-style fallback for people who cannot draw with a pointer. Export to PNG or SVG path data.
When to use
- E-sign flows, delivery confirmation, waivers.
When not to use
- Legal signatures where identity must be verified: use a signing provider.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/signature-pad.json$
npx shadcn@latest add https://sundaeui.dev/r/signature-pad.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/signature-pad.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/signature-pad.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy signature-pad.tsx and signature-pad.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SignaturePad } from '@/components/sundae/signature-pad'
<SignaturePad />Props
| Prop | Type | Default |
|---|---|---|
onChangeCalled with the drawing as SVG path data. | (svgPath: string | null) => void | — |
heightPad height. | number | 160 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A Type alternative is always available; the canvas is labelled and not required.
- Undo / Clear are buttons; signed state is announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-sig; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Signature Pad free?
- Signature Pad is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Signature Pad?
- Run npx shadcn@latest add https://sundaeui.dev/r/signature-pad.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Signature Pad support keyboard and screen readers?
- A Type alternative is always available; the canvas is labelled and not required. Undo / Clear are buttons; signed state is announced.
- Does Signature Pad respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →OTP Field
Forms · Refined- Pro
Wheel Picker
Forms · Refined Password Strength
Forms · RefinedStar Rating
Forms · RefinedSearch Field
Forms · RefinedInline Edit
Forms · Refined