shadcn.io is not affiliated with official shadcn/ui
Contract Generated Success Block for React Aria
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 React Aria. 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.