SignaturePad

The machine records drawn paths. Use controlled or uncontrolled paths; the clear button resets the surface.

import { SignaturePad } from '@manti-ui/react';

export default function SignaturePadBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*6)]">
      <SignaturePad label="Sign here" variant="primary" />
    </div>
  );
}

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional label rendered above the drawing surface.
`clearLabel`	`ReactNode`	`'Clear'`	Label for the clear button.
`variant`	`MantiVariant`	`'primary'`	Accent variant of the surface and stroke.
`paths`	`string[]`	—	Controlled stroke paths.
`defaultPaths`	`string[]`	—	Initial stroke paths for uncontrolled usage.
`onDrawEnd`	`(paths: string[]) => void`	—	Called when a stroke ends, with all paths.
`disabled`	`boolean`	—	Disable drawing.
`readOnly`	`boolean`	—	Render the strokes without allowing new input.
`name`	`string`	—	Form field name for the encoded signature.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="signature-pad"][data-part="root"]`	The component container.
`label`	`[data-scope="signature-pad"][data-part="label"]`	The optional label.
`control`	`[data-scope="signature-pad"][data-part="control"]`	The drawing frame.
`segment`	`[data-scope="signature-pad"][data-part="segment"]`	The SVG canvas holding the strokes.
`segment-path`	`[data-scope="signature-pad"][data-part="segment-path"]`	A single drawn stroke path.
`guide`	`[data-scope="signature-pad"][data-part="guide"]`	The dashed sign-here baseline.
`clear-trigger`	`[data-scope="signature-pad"][data-part="clear-trigger"]`	The clear button.

Tokens

Token	Controls
`--manti-signature-pad-height`	height

Last updated 13 September 2026