shadcn.io is not affiliated with official shadcn/ui
Contract Generated Success Block for React
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.
Installation
Overview
Show a contract before it is sent, with this contract generated page for React with Base UI. It is the Draftbarrow screen after a services agreement was built from someone's answers, a whole screen with the page's rails and one band split in two by a divider. The first cell is the generated page drawn in greyscale in a corner-marked sheet: a title, text as bars, three numbered clauses and two signature blocks that carry the signing order. The second has the message and the signers, an ordered list of two people with initials, role and email, and a Native Select named Who signs first that swaps them, so the numbers follow on the list and on the sheet. The one primary is the Shine Button Request signatures, with a local result, pinned to the foot of a phone's screen. The sheet sits above the signer list on a phone. For contract, proposal and e-signature tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sent. The contract, the clauses and the two signers are typed constants, the sheet is a drawing, and Request signatures only writes a result line ("Requested in this demo: Wren Castellan, then Casimir Dunmore. No email was sent."). To wire it, post the signing order to your e-signature provider, wait for its answer and then say the requests are out; render the sheet from the real document or its first page.
How does the signing order work?
The select holds who signs first. Choosing the other person reverses the list and renumbers both the list and the signature blocks on the sheet, and the live line states the new order. Three or more signers would use the same idea with a draggable or numbered list.
Is the drawn page accessible?
The sheet is decorative and hidden from assistive technology; its caption, "Services agreement, 3 clauses, 2 signature blocks", is the text alternative. Everything it shows, the order and the people, is also in the list beside it.
Related
- Pro
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.
- 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
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.
- 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
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
Invitation Status Sheet Success
People and approvalsA crew page with the sheet that says where each of twelve invitations stands, shown open: filter chips with counts, a status word and time per person, a Resend button on every row and a Resend all pending.