Signature Pad

A pad you sign with a mouse, pen or finger.

$149 once · every Pro piece

Customize

Height

Pen width

Prompt

Disabled

Lines thin out when you move fast and swell under pen pressure, smoothed through quadratic midpoints, and the ink leaves the tip hot and cools to bone over about 600ms. Undo removes the last stroke, Clear fades the ink away, and Export hands an SVG string to onChange.

Install

npx shadcn@latest add @obsyde/signature-pad

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SignaturePad } from '@/components/obsyde/ember/signature-pad/SignaturePad';

export function Example() {
  return (
    <SignaturePad placeholder="Sign here" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/signature-pad/SignaturePad.tsxcomponent
ember/signature-pad/signature-pad.cssstyles
ember/signature-pad/SignaturePadDemo.tsxdemo
ember/tactile-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`height`Height	`number`	`200`
`penWidth`Pen width	`number`	`2.6`
`placeholder`Prompt	`string`	`'Sign here'`
`disabled`Disabled	`boolean`	`false`