Signature Component
A versatile signature capture component with multiple variants for different use cases.
1Installation
2Add Components Using CLI
Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.
Create your signature
3:Default signature with full controls
Import and use the signature components in your project.
Just sign here
4:Compact size signature for smaller UI spaces
Import and use the signature components in your project.
Sign here
5:Form integration with validation and callback
Import and use the signature components in your project.
Signature is required
6:All Variants
A showcase of all signature component variants for different use cases.
Default Signature
Just sign here
Compact Signature
Quick sign here
Styled with Options
Create your signature
Form Integration
Signature is required
7:Props Reference
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
| ReactSignature | className | string | - | Additional CSS classes for styling |
| CompactSignature | label | string | "Sign here" | Label text displayed above the signature area |
| CompactSignature | className | string | - | Additional CSS classes for styling |
| FormSignature | required | boolean | false | Marks the signature as required with validation |
| FormSignature | onSignatureChange | function | undefined | Callback when signature changes with SVG data |
| FormSignature | label | string | "Signature" | Label text for the form field |
| FormSignature | color | string | "#000000" | Color of the signature line |
| FormSignature | backgroundColor | string | "#ffffff" | Background color of the signature area |
| StyledSignature | className | string | - | Additional CSS classes for styling |
8:Features
Download Options
Download signatures as SVG or PNG files for use in documents or storage.
Copy as SVG
Copy signature as SVG code for direct embedding in web applications.
Pen Style Options
Choose from multiple pen styles, sizes, and colors in the styled variant.
Form Validation
Built-in validation support for required signatures in forms.
Responsive Design
Works on both desktop and touch-enabled devices with responsive layout.
Customizable
Extensive customization options for colors, sizes, and behavior.
9:Frequently Asked Questions
Can I use these signatures in PDF documents?
Yes, you can export signatures as PNG or SVG and embed them in PDF documents. The FormSignature component provides built-in export options.
Are these components accessible?
Yes, all signature components are built with accessibility in mind, including keyboard navigation, screen reader support, and ARIA attributes.
How can I customize the signature pad size?
You can customize the size by applying width and height classes through the className prop, or by wrapping the signature component in a container with specific dimensions.
10:Mobile Usage Tips
Tips for mobile devices:
- • Rotate your device to landscape for a better signing experience
- • Use a stylus for more precise signatures if available
- • Tap the signature area to bring up the keyboard on some devices
- • The CompactSignature component is optimized for smaller screens