Sign Pad

Customize
Accent
Stroke3.0
Minimum ink0.30

Installation

pnpm dlx shadcn@latest add @clover-ui/sign-pad

Usage

import { SignPad } from "@/components/sign-pad";

<SignPad />

Save the signature

import { useState } from "react";
import { SignPad, type SignPadValue } from "@/components/sign-pad";

export function Example() {
  const [signature, setSignature] = useState<SignPadValue | null>(null);

  return <SignPad onChange={setSignature} />;
}

The value includes the signature as an image, an SVG and the raw strokes.

Start with a signature

<SignPad defaultValue={signature} />

The ink is dark in light mode and light in dark mode.

Props

PropType

Called when the saved signature changes.

Called when a signature is finished.

Called when signing is closed without finishing.

Starts with an existing signature.

Defaultnull

Color of the Done button.

Default"var(--brand)"

Pen width in pixels.

Default3

How much drawing is needed before you can finish.

Default0.3

Replaces the built in button and hint text.