A signature pad whose line thins with speed and thickens when you slow down, drawn as smooth curves at full screen resolution. It has ink colors, undo, a typed alternative and a signed stamp with the time.
npx shadcn@latest add https://hyperblur.dev/r/input-signature-pad.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-signature-pad.tsx.
import { InputSignaturePad } from "@/components/hyperblur/input-signature-pad"
<InputSignaturePad signer="Jordan Ellis" onConfirm={({ dataUrl }) => upload(dataUrl)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Signature" | Label above the pad. |
| signer | string | "Jordan Ellis" | Name used in the stamp and as the typed placeholder. |
| height | number | 160 | Pad height in pixels. |
| inks | string[] | ["#ededed", "#7fb3ff", "#f5c542"] | Ink colors offered. The first one is selected. |
| minWidth | number | 0.9 | Thinnest line in pixels, reached on fast strokes. |
| maxWidth | number | 3.4 | Thickest line in pixels, reached on slow strokes. |
| defaultStrokes | { x: number; y: number; w?: number }[][] | Strokes to draw on mount, with x and y from 0 to 1. | |
| onChange | (dataUrl: string | null) => void | Called after each stroke, undo or clear with a PNG data URL, or null when empty. | |
| onConfirm | (result: { dataUrl: string | null; typed: string | null; signedAt: string }) => void | Called when the signature is adopted. | |
| confirmLabel | string | "Adopt and sign" | Text of the confirm button. |
| accent | string | "#2f7bff" | Confirm button and focus color. |