SignaturePad

Canvas-based freehand signature drawing pad with clear and export actions.

Examples

Canvas area for capturing a drawn signature.

Draw your signature here

Signature pad with pen color picker and clear / save actions.

Pen color:

Sign here

A previously captured signature displayed as read-only.

Signed: 24 Apr 2026Verified

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

import { SignaturePad } from "@rokle/components";

import { SignaturePad } from "@rokle/components";

export function Example() {
  return <SignaturePad />;
}

Prop	Type	Default	Description
onSignatureChange	(dataUrl: string \| null) => void	-	Called with PNG data URL when signature changes or is cleared.
width	number	400	Canvas width in pixels.
height	number	200	Canvas height in pixels.