shadcn.io is not affiliated with official shadcn/ui
Compliance Certificate Request Billing Block for React
A grid of compliance documents that each say where they stand: ready now with a sample download, takes 3 business days with a tick to request it, or needs info with a VAT number field that unblocks it.
Installation
Overview
Let customers ask for the documents their finance teams need, with this compliance certificate request for React with Base UI. A hairline frame with a plus mark on each corner holds five document cells in a hairline grid: a tax residency certificate, a VAT registration, a W-9, a business licence copy and an insurance certificate. Each cell names the document and its scope and carries a Badge with its state in words. Ready now documents have a Button that saves a real sample text file with a Download Trigger. Takes 3 business days documents have a Checkbox to request them and the date they arrive. Needs info documents have an Input for the missing VAT number; type a valid one and the certificate becomes requestable. A line in the heading counts the states, and the Shine Button, the only colored control, requests every ticked certificate, after which each shows its due date and a way to cancel. It's built from Badge, Button, Checkbox, Download Trigger, Field, Input, Shine Button and Guides, with a CSS entrance only. For payroll, tax and finance products that issue documents on request.
FAQ
How do I fill it with my documents?
Edit DOCS at the top of the file. Each has an id, a name, a scope, a kind of ready, days or info, and for a ready document the sample text and the file name. AS_OF is today's date and TURNAROUND the business days a request takes; the arrival date skips weekends and is worked out from those two constants, so it reads the same everywhere.
How do the states work?
A ready document can be downloaded. A "takes 3 business days" document can be ticked and requested. A "needs info" document stays blocked until its field holds a valid VAT number (two letters and 8 to 12 letters or digits, spaces ignored), then it moves to "takes 3 business days" and gets its own tick. A requested document shows its due date and a Cancel request button. The counts in the heading follow all of this.
What is in the sample file?
A short plain text file marked "SAMPLE ONLY" with made-up values, saved by the browser from the text in sample; no server is involved. In your app, link the Download button to the real document or to a signed URL from your server.
What stays local, and how do I wire it for real?
Requests stay in the page: "Request 2 certificates" marks them as requested and says that nothing was sent. In your app post the ticked document ids (and the VAT number) to your server, which should check the number against your own records, create the requests and return their due dates.
How does it work with a keyboard and a screen reader?
Each cell's state is a word, not a color. Buttons say which document they act on ("Download sample of Form W-9", "Cancel request for Insurance certificate"), each box is named by its title and hint, and the VAT field's problem is read with the field. One polite status line says what changed.