This component allows you to seamlessly add drawing signature functionality to your website or mobile app. It supports JS+HTML, Vue and React.
import React from 'react'
import { SignatureMaker } from '@docuseal/signature-maker-react'
export function App() {
return (
<div className="app">
<SignatureMaker
onSave={(data) => console.log(data)}
onChange={(data) => console.log(data)}
/>
</div>
);
}
downloadOnSave Boolean
Set `false` to disable downloading the signature image on save. It's useful when you want to handle the image data yourself.
Default: false
withTyped Boolean
Set `false` to disable text signature input panel.
Default: true
withDrawn Boolean
Set `false` to disable drawing signature panel.
Default: true
withUpload Boolean
Set `false` to disable uploading signature image panel.
Default: true
withColorSelect Boolean
Set `false` to disable color selection. Only black color will be available.
Default: true
withSubmit Boolean
Set `false` to disable the submit button. Any changes will be available as a base64 string in the `change` event. Custom event 'save' will be triggered on clicking the submit button.
Default: true
saveButtonText String
Default: Submit
controlButtonsContainerClass String
Custom CSS class for the control buttons container.
Example: flex gap-2
controlButtonsContainerStyle String
Custom CSS styles for the control buttons container. Default CSS styles will be disabled
Default: display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;
saveButtonClass String
Custom CSS class for the save button
Example: btn btn-neutral text-white text-base w-full
saveButtonStyle String
Custom CSS styles for the save button
Default: color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;
saveButtonDisabledClass String
Custom CSS class for the disabled save button.
Example: btn-disabled
saveButtonDisabledStyle String
Custom CSS styles for the disabled save button.
Default: background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;
undoButtonText String
Default: Undo
undoButtonClass String
Custom CSS class for the undo button.
Example: btn btn-outline btn-sm font-medium
undoButtonStyle String
Custom CSS styles for the undo button.
Default: color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
clearButtonText String
Custom text for the clear button.
Default: Clear
clearButtonClass String
Custom CSS class for the clear button.
Example: btn btn-outline btn-sm font-medium
clearButtonStyle String
Custom CSS styles for the clear button.
Default: color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
textInputPlaceholder String
Custom placeholder text for the text input field.
Default: Type signature here
textInputClass String
Custom CSS class for the text input field.
Example: input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl
textInputStyle String
Custom CSS styles for the text input field.
Default: color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; margin: 0px 0px 16px; padding: 0px 16px; background-color: #ffffff; border-radius: 8px; flex-shrink: 1; height: 56px; outline: #222222 none 0px; outline-offset: 0px; width: 100%; text-align: start; border: 1px solid #D3D3D3;
canvasClass String
Custom CSS class for the canvas element.
Example: bg-white border border-base-300 rounded-2xl w-full
canvasStyle String
Custom CSS styles for the canvas element.
Default: display: block; vertical-align: middle; width: 100%; border-radius: 8px; background-color: #ffffff; padding: 1px; touch-action: none; user-select: none; text-align: center; line-height: 24px; border: 1px solid #D3D3D3;
typeButtonsContainerClass String
Custom CSS class for the type buttons container.
Example: flex gap-2 mb-4 justify-center
typeButtonsContainerStyle String
Custom CSS styles for the type buttons container.
Default: margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;
drawTypeButtonText String
Custom text for the draw type button.
Default: Draw
drawTypeButtonClass String
Custom CSS class for the draw type button.
Example: flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
drawTypeButtonStyle String
Custom CSS styles for the draw type button.
Default: color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
drawTypeButtonActiveClass String
Custom CSS class for the active draw type button.
Example: bg-neutral text-white font-semibold
drawTypeButtonActiveStyle String
Custom CSS styles for the active draw type button.
Default: color: #fff; background-color: #222222; font-weight: 500;
textTypeButtonText String
Custom text for the text type button.
Default: Type
textTypeButtonClass String
Custom CSS class for the text type button.
Example: flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
textTypeButtonStyle String
Custom CSS styles for the text type button.
Default: color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
textTypeButtonActiveClass String
Custom CSS class for the active text type button.
Example: bg-neutral text-white font-semibold
textTypeButtonActiveStyle String
Custom CSS styles for the active text type button.
Default: color: #fff; background-color: #222222; font-weight: 500;
uploadTypeButtonText String
Custom text for the upload type button.
Default: Upload
uploadTypeButtonClass String
Custom CSS class for the upload type button.
Example: flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
uploadTypeButtonStyle String
Custom CSS styles for the upload type button.
Default: color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;
uploadTypeButtonActiveClass String
Custom CSS class for the active upload type button.
Example: bg-neutral text-white font-semibold
uploadTypeButtonActiveStyle String
Custom CSS styles for the active upload type button.
Default: color: #fff; background-color: #222222; font-weight: 500;
fontUrl String
Custom font URL to be used for the text signature input panel.
Default: https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff
onChange Function
Function to be called when changes are made to the signature.
Example: (data) => { console.log(data) }
onSave Function
Function to be called on saving changes of the signature. withSubmit attribute should be enabled to trigger this function.
Example: (data) => { console.log(data) }