Fluxo UIFluxo UIv0.4.1

Signature Pad

Canvas-based signature capture with smooth strokes, multiple border styles, backgrounds, pen colors and thicknesses, and an imperative API for export, clear, and undo.

Basic Usage

Basic Signature

Sign with mouse, touch, or stylus. Use the ref to export.

Sign here
Signature pad (empty)Draw your signature using mouse, touch, or stylus. Switch to Type mode if you cannot draw.
import { SignaturePad } from 'fluxo-ui';
import type { SignaturePadHandle } from 'fluxo-ui';

const ref = useRef<SignaturePadHandle>(null);

<SignaturePad ref={ref} onChange={(empty) => setEmpty(empty)} />
<Button label="Export PNG" onClick={() => console.log(ref.current?.toDataURL())} />

Borders & Pens

Borders, Backgrounds & Pen Variants

Mix border styles, backgrounds, pen colors, and thicknesses.

Dashed border · grid background
Sign here
Signature pad (empty)Draw your signature using mouse, touch, or stylus. Switch to Type mode if you cannot draw.
Dotted background · bold blue pen
Sign here
Signature pad (empty)Draw your signature using mouse, touch, or stylus. Switch to Type mode if you cannot draw.
No border · thin pen · with color swatches
Sign here
Signature pad (empty)Draw your signature using mouse, touch, or stylus. Switch to Type mode if you cannot draw.
Full width
Sign here
Signature pad (empty)Draw your signature using mouse, touch, or stylus. Switch to Type mode if you cannot draw.
<SignaturePad border="dashed" background="grid" />
<SignaturePad border="solid" background="dotted" penColor="#2563eb" thickness="bold" />
<SignaturePad border="none" background="white" thickness="thin" />

Import

import { SignaturePad } from 'fluxo-ui';
import type { SignaturePadProps, SignaturePadHandle } from 'fluxo-ui';

Props

size
'sm' | 'md' | 'lg' | 'full'"'md'"

Canvas size preset.

border
'solid' | 'dashed' | 'none'"'solid'"

Border style.

background
'white' | 'transparent' | 'grid' | 'dotted'"'white'"

Canvas background pattern.

penColor
string"'#111827'"

Ink color.

thickness
'thin' | 'regular' | 'bold' | number"'regular'"

Pen thickness.

showToolbar
boolean"true"

Show Undo/Clear buttons.

showSwatches
boolean"false"

Show color swatches in the toolbar.

swatches
string[]

Custom color swatches.

placeholder
string"'Sign here'"

Placeholder text shown when empty.

allowTypeMode
boolean"true"

Show a Draw/Type tab so users who cannot draw can type their name as the signature.

typeFontFamily
string"'Brush Script MT, Lucida Handwriting, Apple Chancery, cursive'"

Font family used to render the typed signature on the canvas.

ariaLabel
string"'Signature pad'"

Base accessible name for the canvas. Empty/has-signature state is appended automatically.

onBegin
() => void

Called at stroke start.

onEnd
() => void

Called at stroke end.

onChange
(isEmpty: boolean) => void

Called whenever empty state flips.