shadcn.io is not affiliated with official shadcn/ui
Document Signed Success Block for React
A full-height confirmation after the last signature: a Signed stamp beside the heading, the completion record as a six-event table with fixed UTC times, the document hash with a real copy button, and a real .txt download of the record.
Installation
Overview
Give a signed document its proof, with this document signed page for React with Base UI. It is the Nibsign screen after the last signer finished, a whole screen with the page's rails and one band across it, in a medium column. A check in a muted tile, the heading with a Stamp Text that reads Signed beside it, and a sentence come first, then a corner-marked panel: the completion record as a table of six events with fixed UTC times (Created, Sent, Opened by Dana, Signed by Dana, Signed by Mira, Sealed), and the document's hash in monospace with a Copy Button that really copies it. The one primary is the Shine Button Done, next to Download copy, a real Download Trigger that saves the record as a .txt file. On a phone the table keeps both columns. For e-signature and compliance tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sealed. The document, the people, the six events and the hash are typed constants, and the hash is a sample, not the digest of any file. Download copy and the copy button are real. To wire it, render the table from your audit log, compute the SHA-256 of the sealed file on the server and show that, and point Done at your documents list.
What is in the downloaded record?
A plain text file named nibsign-master-services-agreement-record.txt: the document name, one line per event with its UTC time and who did it, and the hash. It is built in the page from the same list as the table, so the two cannot disagree.
Does the stamp matter for accessibility?
The stamp is decoration: it lands letter by letter and is hidden from assistive technology, because the heading already says everyone has signed. With reduced motion it appears without the landing.
Related
- Pro
A full-height split confirmation for a generated contract: the page drawn in greyscale with clause numbers and two signature blocks, a select that sets who signs first so the numbers follow, and a Request signatures button with a local result.
- Pro
Digital Signature Account
VerificationA signature and the key behind it: key facts with a fingerprint and a public key download, a signature pad with a typed route, the signature at three sizes, and a new key that asks first.
- Pro
Certificate Validity Chain Success
Domains and networkA confirmation panel for an issued TLS certificate: three dates on shared hairlines, a validity bar from issue to expiry with a hatched renewal window and a marker the visitor moves along it, and the certificate chain as nested lists with a copy button for each fingerprint.
- Pro
Audit Scorecard Success
Saves and updatesA confirmation page for a finished control review: a ring of the checks that passed worked out from six control families, each family as a row of cells (filled for a pass, hollow for a check that did not), a short list of findings and dates, and a real one-page PDF summary to download.
- Pro
Policy Update Diff Success
Saves and updatesA confirmation panel for a new policy version: three clauses as before and after with removed words struck through and added words underlined, who has read it by department, a reminder for those who haven't and a real PDF download.
- Pro
Signature Pad Dialog
Notes and editingA 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.