GitHub55X

Signature Pad

Vue signature pad to capture handwritten signatures with draw, clear, and export support.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/signature-pad.json

Usage

      
      <script setup lang="ts">
import { SignaturePad } from "@/components/ui/signature-pad";
</script>

<template>
  <SignaturePad.Root>
    <!-- … -->
  </SignaturePad.Root>
</template>

Composition

      
      SignaturePad.Root
├── SignaturePad.ClearTrigger
├── SignaturePad.Context
├── SignaturePad.Control
├── SignaturePad.Guide
├── SignaturePad.HiddenInput
├── SignaturePad.Label
├── SignaturePad.RootProvider
├── SignaturePad.Segment

Examples

Image Preview

After the user draws a signature, you can display a preview of the signature as an image. This is useful when you want to show the user a preview of the signature before saving it.

Field

The Field component helps manage form-related state and accessibility attributes of a signature pad. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Root Provider

An alternative way to control the signature pad is to use the RootProvider component and the useSignaturePad hook. This way you can access the state and methods from outside the component.

API

See Ark UI Signature Pad docs for full props and examples.

SidebarSkeleton