Signature Pad
Signature Pad is a form in the UI HUB forms collection. A hand-drawn signature pad on canvas with variable ink weight sized by pointer speed. Undo pops the last stroke, Clear wipes all, and every stroke end exports a PNG data URL through onChange.
The component is driven by 7 documented props (onChange, penColor, minWidth, maxWidth, clearOnResize, hint and 1 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: canvas 2d; ResizeObserver; pointer capture.
Preview the form in the browser above, copy the source, and paste it into your project. Forms components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Signature Pad?
Signature pad with variable-pressure rendering, undo/clear controls, and PNG data-URL export.
Signature Pad at a glance
- Category
- Forms
- Pricing
- Free to use
- Libraries
- React and Lucide React
- Styling
- Tailwind CSS
- Configurable props
- 7
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Signature Pad works
A hand-drawn signature pad on canvas with variable ink weight sized by pointer speed. Undo pops the last stroke, Clear wipes all, and every stroke end exports a PNG data URL through onChange.
Technical information for Signature Pad
| Category | Forms |
|---|---|
| Libraries | React and Lucide React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas |
| State change | empty dashed canvas with baseline hint to captured ink strokes with Undo/Clear enabled |
| Props | 7 configurable |
| Usage example | Not published yet |
What Signature Pad requires
- canvas 2d
- ResizeObserver
- pointer capture
- stroke history for undo
- devicePixelRatio handling
Signature Pad questions
What is Signature Pad?
Signature pad with variable-pressure rendering, undo/clear controls, and PNG data-URL export.
How does Signature Pad work?
A hand-drawn signature pad on canvas with variable ink weight sized by pointer speed. Undo pops the last stroke, Clear wipes all, and every stroke end exports a PNG data URL through onChange.
Which category does Signature Pad belong to?
Signature Pad is listed under Forms in the UI HUB catalog. Form interface components with considered interaction design: animated focus states, floating labels, input borders that respond to focus and validation, and submit button transitions. These are presentation components, so wire them to your own state and validation logic rather than expecting form behaviour out of the box.
What does the onChange prop do in Signature Pad?
Called with the signature data URL whenever a stroke ends (or cleared). It defaults to undefined.
What does the minWidth prop do in Signature Pad?
Minimum stroke width in px (slow drawing). It defaults to 1.
Is Signature Pad free to use?
Signature Pad is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Signature Pad use?
Signature Pad uses React and Lucide React and is styled with Tailwind CSS.
What does Signature Pad need to run?
Signature Pad needs canvas 2d, ResizeObserver, pointer capture and stroke history for undo.