shadcn.io is not affiliated with official shadcn/ui
Enterprise Quote Checkout Block for Radix UI
A quote to accept by signing it: the quote's lines with list and quoted prices and the days remaining, and an acceptance with a drawn signature or a typed name, a company tick and a request-changes note.
Installation
Overview
Close a deal without a meeting, with this enterprise-quote checkout for React with Radix UI. A compact header from Ledgerwood, an office-furniture maker, sits over a hairline frame split in two. On the start side is the quote itself: its number, the day it was issued, the day it is valid until and how many days remain, worked out from a fixed date, and a table of four lines with the list price struck through beside the quoted price, the line totals, the saving against list and the quoted total. On the end side is the acceptance: a Signature Pad to draw on, a labelled Input to type your full name (the keyboard route, which counts the same), a tick that you can accept for your company, and a ghost Request changes that swaps the signing area for a Textarea without moving anything. Accept is the only Shine Button; it refuses until the quote is signed and ticked and says which is missing. Accepting is a note in this tab: "Accepted in this demo; nothing is binding". For enterprise software, furniture, projects and any sale that starts as a quotation.
FAQ
Why is there a typed name as well as the pad?
A drawing pad needs a pointer, so a keyboard user could not sign with it alone. Typing your full name is the keyboard route and counts the same; the pad is the extra. Either one makes the quote signed, and the status line says which is missing when you press Accept too early.
Is this a legally binding signature?
No, and it says so: the result is "Accepted in this demo; nothing is binding". A real acceptance needs your terms, an identity check suited to the value and the law of where you sell, usually a signature provider's flow. This block shows the layout, the refusals and the wording around it.
How are the days remaining worked out?
From two typed ISO dates, the day the page is read (a fixed constant) and the day the quote is valid until, with UTC arithmetic. It is never computed from the visitor's clock, so the page reads the same on every load; in your app set the first date to today on the server.
What does Request changes do?
It swaps the signing area for a note box in the same space, so the panel does not change height, moves focus to the note, and the primary button becomes Send request. Back to signing returns to the first view and keeps what you had drawn or typed. Nothing is sent from the demo.
How does the quote table read to a screen reader?
It has a caption, column headers and row headers, the struck-through list price is a real strikethrough, and every price keeps its own text direction so it reads correctly in right-to-left pages. On a phone the list price moves under the item name and the list column is hidden.
What stays local, and how do I connect it for real?
The quote data is typed and Accept only sets a flag in the tab. To connect it, load the quote from your CRM, post the typed name or the signature image to your server with the quote number and a timestamp, and store who accepted what and when; keep this layout, the refusals and the two routes to sign.