## Signature Pad (S—166)

Draw a signature with pressure-smoothed strokes; undo the last stroke, clear, or type your name instead.

- URL: https://sundaeui.dev/components/signature-pad
- Category: Forms & inputs · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/signature-pad.json`
- Tags: contract, signature, canvas, draw, input, e-sign

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.

### Usage

```tsx
import { SignaturePad } from '@/components/sundae/signature-pad'

<SignaturePad />
```

### Props

- `onChange` (`(svgPath: string | null) => void`): Called with the drawing as SVG path data.
- `height` (`number`, default `160`): Pad height.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- E-sign flows, delivery confirmation, waivers.

### When not to use

- Legal signatures where identity must be verified: use a signing provider.

### 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.