Capture Digital Signatures Easily with Shadix UI SignaturePad

#webdev #react #signaturepad #shadcn

If you’re building modern web apps with React + Tailwind, and need a smooth way to capture user signatures, the Shadix UI SignaturePad component has you covered.

It’s simple, beautiful, and fully compatible with the Shadcn design system — meaning you can integrate it seamlessly into your existing UI.

🚀 Installation

If you already use the shadcn/ui registry, you can add the SignaturePad directly:

pnpm dlx shadcn@latest add @shadix-ui/signature-pad

Then import it into your component file:

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

💡 Basic Usage

Here’s a simple example of capturing a signature and handling its save event:

"use client";

import React from "react";
import { SignaturePad } from "@/components/ui/signature-pad";

export default function SignaturePadDemo() {
  const handleSave = (dataUrl: string) => {
    console.log("Signature saved:", dataUrl);
    // send to your backend or store in DB
  };

  return (
    <div className="flex flex-col items-center justify-center p-6">
      <h2 className="text-xl font-semibold mb-4">Sign below 👇</h2>
      <SignaturePad
        penColor="#000"
        lineWidth={3}
        showButtons
        onSave={handleSave}
      />
    </div>
  );
}

You’ll instantly get a clean, responsive canvas with built-in Clear and Save buttons.

⚙️ Props Overview

Prop	Type	Description
`penColor`	`string`	Stroke color for the pen.
`lineWidth`	`number`	Thickness of the drawn line.
`showButtons`	`boolean`	Show default buttons (`Clear`, `Save`).
`onSave`	`(dataUrl: string) => void`	Fires when user saves.
`onChange`	`(dataUrl: string \	null) => void`

🧩 Real-World Use

You can use this component in:

Contract or invoice signing pages 🧾
Consent or approval forms ✅
Kiosk or tablet check-in apps 📱

When a user saves, you get a Base64 image URL, which you can send to your backend and store as an image or file.

🧠 Pro Tip

If you’re using Tailwind CSS, make sure your container has a visible height — otherwise the canvas may collapse.

<div className="h-[300px] w-full border rounded-md">
  <SignaturePad />
</div>

🎯 Final Thoughts

The SignaturePad from Shadix UI gives you a drop-in way to collect digital signatures without extra dependencies or messy setup.

It’s open-source, customizable, and built for modern React apps.

👉 Try it out here: https://shadix-ui.vercel.app/docs/components/signature-pad

DEV Community