A surface to sign on with a mouse, pen or finger.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/signature-padPlayground
Sign to accept
Sign here
Required
Delivery sign off
Sign here
Disabled
Locked
Sign here
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/signature-pad
Accessibility
- The pad is a labelled group, and status is announced.
- Offer a typed signature as an alternative.
Motion
- Ink trails the pointer on a smoothing filter and thins with speed.
- Clear fades and blurs over 420 ms. Confirm pops a stamp.
- With reduced motion, clear is instant and nothing shakes.
Responsive behavior
- 168 px high on Web and 200 px on Mobile.
Performance
- During a stroke only the new segments are drawn, so a long signature stays cheap.
- It reads coalesced pointer events for smoother pen input.
- Resize and theme observers disconnect on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import
SignaturePadfrom@/components/fetaui/signature-pad. It composesButton. onChangeandonConfirmreturn a PNG data URL. The demo stores nothing, so save it on your server.requiredshows the message when Confirm is pressed with nothing drawn, and Confirm shakes the pad instead of firing.- Offer a typed name as well, for people who cannot draw.
Related
ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.InputComponentThe single line text control: a pill on the tray fill that lifts onto the surface when focused.