Signature Pad

A customizable signature pad component for shadcn/ui. Allows users to draw signatures on a canvas, with options to clear, undo, and export.

"use client";
import type React from "react";

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

const SignaturePadDemo: React.FC = () => {
    return (
        <div className="flex flex-col items-center justify-center min-h-screen gap-6 p-4">
            <SignaturePad
                variant="default"
                size="md"
                onSave={(val) => console.log(val)}
                onChange={(val) => console.log(val)}
            />
        </div>
    );
};

export default SignaturePadDemo;

Installation

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

Usage

Basic Usage

Import the component

import { SignaturePad } from '@/registry/new-york/components/signature-pad';

Import the styles

@import '@styles/signature-pad.css' // or relative path to the styles file based on your components.json file;;

Or add this to your tailwind.config.ts:

theme: {
    extend: {
        cursor: {
            pencil: 'url("data:image/svg+xml...") 0 24, pointer'; // copy the value from the styles file
        }
    }
}

Use the component

<SignaturePad
    penColor="hsl(var(--foreground))"
    lineWidth={4}
    showButtons={true}
    saveButtonIcon={<Save />}
    clearButtonIcon={<BrushCleaning />}
/>

Props

Prop

Type

Signature Pad

Installation

Usage

Basic Usage

Import the component

Import the styles

Use the component

Props

On this page