Rafi Wirana

Design Engineer

Preview

Work in Progress: This installation guide is still being refined. Some documentation may be incomplete.

Copy link

Sign Composer

A signature interface that appears only when you need it. Features expandable canvas, device-pixel-ratio awareness, and smooth animations.

Try drawing your signature and click Sign to submit. You can also clear and redraw.

Installation

✨ No external dependencies required

Component location

components/craft/SignComposer/index.tsx

Usage

Basic example

import { SignComposer } from '@/components/craft/SignComposer';
import { toast } from 'sonner';

export function Example() {
  const handleSubmit = async (signatureDataURL: string) => {
    // signatureDataURL is a base64-encoded PNG image
    await saveSignature(signatureDataURL);
    toast.success("Signature submitted successfully!");
  };

  return (
    <SignComposer
      onSubmit={handleSubmit}
      position="bottom-right"
      documentTitle="Agreement"
    />
  );
}

More Examples

Basic Usage

Default bottom-right positioned signature composer

<SignComposer
  onSubmit={async (dataURL) => {
    console.log("Signature:", dataURL);
  }}
/>

Custom Position

Position in different corners of the screen

<SignComposer
  onSubmit={handleSubmit}
  position="bottom-left"
  documentTitle="Contract"
/>

Initially Expanded

Start with the canvas already open

<SignComposer
  onSubmit={handleSubmit}
  initiallyExpanded={true}
  documentTitle="Form"
/>

Controlled State

Control expansion state externally

const [isExpanded, setIsExpanded] = useState(false);

<SignComposer
  onSubmit={handleSubmit}
  expanded={isExpanded}
  onExpandedChange={setIsExpanded}
/>

Static Position

Embed inline instead of floating

<SignComposer
  onSubmit={handleSubmit}
  position="static"
  initiallyExpanded={true}
/>

Keep Signature on Close

Preserve signature when collapsing (default: true)

<SignComposer
  onSubmit={handleSubmit}
  clearOnClose={false}
/>

API Reference

Prop	Type	Default	Description
`onSubmit`Required	`(signature: string) => Promise<void> \| void`	—	Callback fired when signature is submitted. Receives base64-encoded PNG data URL.
`className`	`string`	—	Additional CSS classes for the root container
`position`	`"bottom-right" \| "bottom-left" \| "top-right" \| "top-left" \| "static"`	`"bottom-right"`	Position of the composer. Use "static" for inline embedding.
`initiallyExpanded`	`boolean`	`false`	Whether the canvas starts expanded (uncontrolled mode)
`documentTitle`	`string`	`"Document"`	Title displayed in the expanded signature panel
`expanded`	`boolean`	—	Controlled expansion state. When provided, component operates in controlled mode.
`onExpandedChange`	`(expanded: boolean) => void`	—	Callback fired when expansion state changes
`clearOnClose`	`boolean`	`true`	Whether to clear the signature when collapsing the panel