Capture Digital Signatures Easily with Shadix UI SignaturePad

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`

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

Source: DEV Community.