手寫簽名板

以 canvas 2d 與 Pointer Events 實作的手寫簽名板：依書寫速度（或觸控筆真實筆壓）即時改變線寬，模擬鋼筆筆壓；筆畫以堆疊儲存，支援逐筆復原、一鍵清除與下載 PNG，並附虛線簽名底線與「請簽名」浮水印。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

筆跡顏色strokeColor

最細線寬minWidth

1.5

最粗線寬maxWidth

簽名區高度height

220

浮水印文字placeholder

<SignaturePad />

安裝

npx shadcn@latest add https://webberui.com/r/signature-pad.json

或在 components.json 設定 registries 後，改用 @webberui/signature-pad 安裝。

安裝依賴後，從 registry JSON（/r/signature-pad.json 的 files[0].content）複製 signature-pad.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion lucide-react clsx tailwind-merge

使用

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

<SignaturePad
  height={200}
  onChange={(dataUrl) => {
    // dataUrl 為 PNG dataURL，畫布為空時為 null
    console.log(dataUrl);
  }}
/>

Props

Prop	型別	預設值	說明
`strokeColor`	`string`	`"currentColor"`	筆跡顏色；預設落筆當下讀取容器文字顏色，自動適應深淺色主題
`minWidth`	`number`	`1.5`	快速滑動時的最細線寬（px）
`maxWidth`	`number`	`4`	緩慢下筆時的最粗線寬（px）
`height`	`number`	`220`	簽名區高度（px），寬度自動填滿容器
`placeholder`	`string`	`"請簽名"`	尚未落筆時顯示的浮水印文字
`fileName`	`string`	`"signature"`	下載 PNG 時的檔名（不含副檔名）
`exportBackground`	`string`	`"#ffffff"`	匯出 PNG 的底色；設為 `"transparent"` 可輸出透明背景
`onChange`	`(dataUrl: string \| null) => void`	—	每次筆畫結束、復原或清除後回呼；畫布為空時傳入 `null`
`className`	`string`	—	透傳到最外層容器

可及性

簽名區設有 role="img" 與 aria-label="手寫簽名區"，工具列按鈕皆為原生 button，附文字標籤與 disabled 狀態
使用 Pointer Events 並設定 touch-action: none，滑鼠、手指與觸控筆皆可書寫；觸控筆會採用真實筆壓值
使用者系統開啟「減少動態效果」時，浮水印過場與按鈕微縮動畫停用，書寫功能完全不受影響
手寫簽名本質上需要指向裝置；在正式表單中請提供替代的同意方式（例如勾選框加輸入姓名）

Playground

安裝

使用

Props

可及性

On this page