Signature Pad

A canvas-based signature field with a spring-weighted pen tip, speed-sensitive ink width, undo/clear controls, and SVG export of the drawn signature.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Signature Pad to your project and fits it to your theme.

import SignaturePad from "@/components/ui/signature-pad";

export default function SignaturePadDemo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <SignaturePad onChange={(svg) => console.log(svg)} />
    </div>
  );
}