This content originally appeared on DEV Community and was authored by GihanRangana
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
This content originally appeared on DEV Community and was authored by GihanRangana
GihanRangana | Sciencx (2025-11-01T10:01:30+00:00) Capture Digital Signatures Easily with Shadix UI SignaturePad. Retrieved from https://www.scien.cx/2025/11/01/capture-digital-signatures-easily-with-shadix-ui-signaturepad/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.