shadcn.io is not affiliated with official shadcn/ui
Signed Document File Upload Block for Radix UI
A four-step signing flow: upload one PDF, see three signers in order, draw or type your signature and have it stamped onto a drawn contract page that follows the flow; signed in this demo.
Installation
Overview
Let someone sign what they just uploaded without leaving the page, with this file upload panel for React with Radix UI. It is the signing flow of Quillsign, contract signing for freelancers. A Steps strip shows Upload, Signers, Sign and Done over a body and an action foot, beside a drawn contract page that follows the flow. Upload takes one PDF through a File Upload drop zone and lists it as an Attachment row; a second pick replaces it. Signers is the typed order of three people, two already signed and You third. Sign is the Signature Pad, with a typed name for anyone who cannot draw, and the foot's Sign document stamps your own drawn strokes onto the page's signature line. Done lists all three as signed. Continue and Sign document are the one Shine Button, in turn. The panel is ruled by Guides. It is built from Steps, File Upload, Signature Pad, Attachment, Input, Shine Button and Guides, with a CSS entrance only. For contract tools, onboarding paperwork and any upload that ends in a signature.
FAQ
Is the signature legally binding?
No. It is a demonstration: the status line says "Signed in this demo. This is not a legally binding signature." and nothing is sent, stored or kept. A real signing service adds identity checks, an audit trail and a sealed copy on its server; wire those in before you rely on it.
What is stamped on the page?
Your own strokes. The Signature Pad hands back the drawn paths, and the page draws them scaled to the signature line in the theme's text colour. If nothing is drawn, a typed name of two or more characters is stamped in a script face instead; a typed name is a stand-in, not handwriting. The two earlier signatures are fixed marks.
What if I cannot draw?
The pad needs a pointer, so a labelled Input below it takes a typed name, reachable from the keyboard. Sign document asks for either one; with neither it says so under the pad and in the status line, and stays available rather than disappearing.
Does it read my PDF?
No. The file is listed by name and size and the contract page is a drawing titled from the file name, with a caption saying the file is not opened. The seeded agreement has a typed page count; a picked file says its pages were not read. Anything that is not a PDF is refused with a message.
How do the steps behave?
The four panes share one cell, so the panel never changes height, and only the current pane can be reached. Back returns one step until the flow is done; on Done the primary becomes Sign another, which clears the pad and the document and starts again.
How do I wire it to a real service?
Replace the typed signers with your envelope's recipients and their status, send the uploaded file and the drawn paths to your signing API from the Sign document handler, and keep the polite status line for the result. The ordering rule, that you sign after the two before you, belongs on your server too.