Signature Pad

Inputs

Canvas-based free-hand signature capture with save and clear actions.

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for inputs/signature-pad

Instalação via CLI

$ npx kikitocn add signature-pad

Exemplo de uso

Signature PadExample.tsx

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

export function SignaturePadExample() {
  return (
    <SignaturePad />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`width`	`number`	`400`	Largura do canvas (px)
`height`	`number`	`200`	Altura do canvas (px)
`lineWidth`	`number`	`2`	Espessura do traço
`color`	`string`	`'#000000'`	Cor do traço
`backgroundColor`	`string`	`'#ffffff'`	Cor de fundo do canvas
`onSave`	`(dataUrl: string) => void`	—	Callback ao salvar (base64 PNG)
`onClear`	`() => void`	—	Callback ao limpar
`readOnly`	`boolean`	`false`	Somente visualização
`className`	`string`	—	Classes CSS extras

Voltar para Inputs

Carregando…