2

E-Signature

PreviousNext

Place, review, and complete signature fields on PDF documents.

E-Signature extends a PDF viewer with signature, initials, date, and approval fields. It should keep field placement precise while making signing status clear.

See it composed with the PDF Viewer in the E-Signature block.

Signature1
p. 1
Needs signature · 250 x 58 field
Initials
p. 2
Signed · Completed by Andrew
"use client";

import { SignatureFieldCard } from "@/components/ui/signature-field-card";

export function ESignatureExample() {
  return (
    <div className="flex h-[420px] flex-col gap-2 bg-background p-3">
      <SignatureFieldCard
        label="Signature1"
        pageLabel="p. 1"

Installation

pnpm dlx shadcn@latest add https://ui.extend.ai/r/e-signature.json

Useful behaviors

  • Signature, initials, date, checkbox, and text field placement.
  • Recipient-specific field ownership and completion state.
  • Required-field validation before submit.
  • Audit-friendly signed, pending, and declined states.

API Reference

SignatureFieldCard

The SignatureFieldCard component renders a signature field summary with status, recipient context, and an optional action.

PropTypeDefaultRequired
labelstring-Yes
status"unsigned" | "signed" | "optional""unsigned"No
pageLabelstring-No
descriptionstring-No
iconClassNamestring"bg-blue-500/10 text-blue-600 dark:text-blue-300"No
actionLabelstring"Sign" or "Edit signature"No
onAction() => void-No
classNamestring-No
...propsReact.HTMLAttributes<HTMLDivElement>-No