Carregando…

Signature Pad

Inputs

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

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`	`160`	Altura do canvas (px)
`lineWidth`	`number`	`2`	Espessura do traço
`color`	`string`	`undefined`	Cor do traço (padrão: acompanha o tema via --ks-text)
`backgroundColor`	`string`	`'transparent'`	Cor de fundo do canvas
`onSave`	`(dataUrl: string) => void`	—	Callback ao salvar (base64 PNG)
`onClear`	`() => void`	—	Callback ao limpar
`saveLabel`	`string`	`'Save'`	Texto do botão de salvar
`clearLabel`	`string`	`'Clear'`	Texto do botão de limpar
`placeholder`	`string`	`'Sign here'`	Texto exibido no canvas vazio
`readOnly`	`boolean`	`false`	Somente visualização
`className`	`string`	—	Classes CSS extras
`style`	`CSSProperties`	—	Estilos inline pro container

Voltar para Inputs

Carregando…

Signature Pad

Signature Pad

Default

Custom color + read-only

Default

Custom color + read-only