# Signature pad

> Draw a signature with mouse, pen or finger; strokes thin with speed. Undo and clear.

Component · Pro · https://lodeui.com/components/signature-pad

## When to use

- Agreements, delivery confirmations and consent forms.

## When not to use

- As the only way to sign: offer a typed-name alternative for people who can't draw.

## Installation

```bash
npx shadcn@latest add @lode/signature-pad
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SignaturePad } from "@/components/ui/signature-pad";

<SignaturePad onChange={(png) => setSignature(png)} />
```

## API reference

### SignaturePad

A canvas you draw on with any pointer. Lines thin out as you move faster.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| onChange | `(dataUrl: string \| null) => void` | – | A PNG data URL after each stroke; null when cleared. |
| color | `string` | – | Ink color; defaults to the text color. |
| height | `number` | `180` | Pad height in px. |
| label | `string` | `"Signature"` | Heading and accessible name. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach Undo and Clear |

## Accessibility

- The canvas is an image labelled as empty or drawn.
- The hint tells people without a pointer to use a typed alternative.

## Motion

- The "Sign here" hint fades out with the first stroke.

## Responsive behavior

- Fills its container; redraws crisply on resize and high-DPI screens.

## Performance

- Strokes are kept as points and redrawn only on resize or undo.

## Notes for AI

- Upload the PNG data URL as a file; don't store it inline in a database row.

## Related

- [Inline edit](https://lodeui.com/components/inline-edit) — Text that becomes a field on click; Enter saves with validation, Escape cancels.
- [File dropzone](https://lodeui.com/components/file-dropzone) — Drag-and-drop upload with type, size and count checks and per-file progress.