Signature pad

Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.

npx shadcn@latest add @silicon-ui/signature-pad
inputsnew
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/signature-pad

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/signature-pad/signature-pad.tsx
    • components/silicon-ui/signature-pad/signature-pad.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

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

API reference

PropTypeDefault
signer

Printed under the baseline, such as the signer's name.

string—
hint

Resting hint on the baseline before the first stroke.

string"Sign here"
defaultColorInkColor

"black""blue""violet"

"black"
defaultWidthInkWidth

"fine""medium""bold"

"medium"
onChange

Receives the strokes after every change.

(strokes: InkStroke[]) => void—
fileName

File name for exports, without extension.

string"signature"
label

Accessible name of the drawing surface.

string"Signature pad"
classNamestring—

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens