shadcn.io is not affiliated with official shadcn/ui
Signature Pad Dialog Block for Svelte
A contract with a signing dialog shown open: a Draw tab with the catalog signature pad, a pen-width slider and Undo, Redo and Clear, a Type tab as the keyboard route, an honest line that it is not a legal e-signature, and the signature placed on the contract.
Installation
Overview
Collect a mark on a document without pretending it is more than that, with this signing dialog for Svelte with Ark UI. It opens from the Service agreement of Sealfold, a contract-signing tool: the page's header holds an outline Sign Button, and the contract, a title, clauses and a dashed box to sign in, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog has two Tabs. Draw holds the catalog Signature Pad on a dashed line, a pen-width Slider from 1 to 4 and Undo, Redo and Clear for the strokes. Type is the keyboard route: a name is set in an italic serif on the same line. Apply signature is the only Shine Button; it stays quiet until the open tab has something and says what it is waiting for, and the dialog says it is a drawn mark and not a legal e-signature, and that a typed name is not one either. Applied, the signature sits in the box on the contract, the strokes as an SVG path or the typed name as text, with "Signed in this demo". For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the contract: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Sign button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SignFields component and share the block's state, so strokes drawn in the copy are in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How do the strokes, Undo, Redo and Clear work?
The pad keeps each stroke as an SVG path and the block holds them as a list, so they are controlled: Undo takes the last stroke off and keeps it, Redo puts it back, and drawing a new stroke drops what could have been redone. Clear empties the pad. The pen slider sets the width of the next strokes, 1 to 4, and does not change the ones already drawn. Each button is always on the page, quiet when it has nothing to do, and answers in words if you press it then.
How can someone sign without a pointer?
Through the Type tab, which is not an afterthought: the pad is pointer-only and says so in its name, and the dialog points to the tab beside the pad. A typed name is set in an italic serif on a dashed line, the same size as the pad, and Apply signature takes it. Typing is also the tab to use with a screen reader. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange.
Is this a legal signature?
No, and the dialog says so under the pad: a drawn mark, not a legal e-signature, and a typed name is not one either. A real signing service adds what the law asks for: who signed, when, from where, a record of the document as signed and consent to sign electronically. Here nothing is recorded; the strokes live in this page's state and the contract shows them.
What stays local in the demo, and how do I wire it up?
Everything. Apply signature puts the strokes or the name into the page's state and draws them in the box, with the fixed date 15 Oct 2026; nothing is signed, stored or sent. In your app read the strokes from onDraw (onDrawEnd also hands you an image through getDataUrl), send them from apply, and keep the SVG path as the picture of the mark.
How does it look on a phone?
The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned and the content scrolling above them. The pad is full width and 160 px high, and the pen and strokes controls wrap onto two lines. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.