Signature Pad

A touch and stylus signature field with pressure-sensitive variable-width ink, undo/redo, a clear animation, playback of the drawn signature, and PNG or SVG export.

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.

"use client";

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

export default function SignaturePadDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <div className="w-full max-w-lg">
        <SignaturePad signer="Jordan Ellis" />
      </div>
    </div>
  );
}