Components
Signature pad
Sign with liquid ink: strokes swell when you slow down and thin out when you flick, and iridescent ink shifts hue along the line. Export PNG or SVG.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { SignaturePad, type SignaturePadHandle } from '@vizzele/react';
const pad = useRef<SignaturePadHandle>(null);
<SignaturePad ref={pad} onChange={(empty) => setCanSubmit(!empty)} />
<button onClick={() => upload(pad.current!.toSVG())}>Send</button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
ink | 'iridescent' | CSS colour | 'iridescent' | Ink. |
minWidth / maxWidth | number | 1.4 / 4.4 | Stroke width range (px). |
height | number | 200 | Pad height (px). |
onChange | (empty) => void | — | After every stroke or clear. |
ref | SignaturePadHandle | — | clear(), isEmpty(), toDataURL(), toSVG(). |
Accessibility
- “Type instead” lets keyboard and screen-reader users type their name; it is set in a script face on the baseline.
- The canvas is an image named "Signature: empty" or "signed".
- Strokes are kept as data, so resizing redraws them crisply and SVG export is exact.