Signature Pad Dialog Block for React

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.

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.

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 passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

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.

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.

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.