sigilUI

Signature Pad

Draw a signature and clear or export the result.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { SignaturePad } from "@sigil-ui/components";

Usage

<SignaturePad className="w-full max-w-md h-32" />

Props

PropTypeDefaultDescription
widthnumber—Width of the rendered content.
heightnumber—Height of the rendered content.
strokeColorstring—Stroke Color configuration.
strokeWidthnumber—Stroke Width configuration.
onChange(dataUrl: string | null) => void—Called when the value changes.
disabledboolean—Prevents user interaction when enabled.

Token integration

CSS VariablePurpose
--s-textText
--s-radius-mdRadius md
--s-borderBorder
--s-border-styleBorder style
--s-backgroundBackground
--s-text-mutedText muted
--s-duration-fastDuration fast