# Signature Pad

Signature pad with smooth finger-drawn strokes, undo and clear. Signing replays your strokes in colour and adds a date stamp, and the signature exports as a crisp image.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/signature-pad
```

## Import

```tsx
import { smoothStrokePath, SignaturePad } from "@/components/ui/signature-pad/signature-pad";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `strokes?` | `SignatureStroke[]` | Controlled strokes. |
| `onChange?` | `(strokes: SignatureStroke[]) => void` | Fires after every committed stroke / undo / clear. |
| `onSign?` | `(result: SignatureResult) => void` | Fires on the confirm button or `ref.sign()` — gets the export payload. |
| `signerName?` | `string` | Pinned under the baseline guide; once signed it reads "Name · signed 14:02". |
| `confirmLabel?` | `string` | Confirm button label (default "Sign"). Rendered only when `onSign` is set. |
| `signedLabel?` | `string` | Confirm button label once signed (default "Signed"). |
| `collapseOnSign?` | `boolean` | After the signed hold, fold the pad into a 64pt signed strip. Default false. |
| `penColor?` | `string` | Ink color — defaults to the theme foreground. |
| `strokeWidth?` | `number` | Stroke width (default 2.5). |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/signature-pad