Signature Pad
A controlled or composable signature surface with pressure-aware drawing, history, form values, and image export.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { SignaturePad } from "@carsxe/design-system/components/signature-pad"Usage
tsx
import { SignaturePad } from "@carsxe/design-system/components/signature-pad"
<SignaturePad name="authorization" label="Authorized signature" />Compound anatomy
Read-only signature
API Reference
| Prop | Type | Default |
|---|---|---|
| paths | SignaturePath[] | — |
| defaultPaths | SignaturePath[] | [] |
| onPathsChange | (paths: SignaturePath[]) => void | — |
| onDraw / onDrawEnd | (details) => void | — |
| drawing | { size?: number; simulatePressure?: boolean } | — |
| disabled / readOnly / required | boolean | false |
| name | string | — |