Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Success blocks

Pro

Vendor Compliance Ledger Success Block for Radix UI

A confirmation panel for a vendor finishing onboarding: the portal address with a copy button, a table of four compliance documents with verified and valid-until days and a state, and a line on when the first to expire is chased.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Prove a vendor is ready to be paid with this confirmation panel for React with Radix UI. It's the panel Vendhurst, a vendor-management app, shows when a vendor finishes onboarding: a header with one action, the Shine Button that opens the vendor portal, over one framed card in three bands ruled by Guides. The first says where the vendor signs in, with the portal address in a read-only Input Group and a Copy Button. The second is the compliance ledger, a native table of four documents (tax form, insurance certificate, mutual NDA, bank details) with the day each was verified, the day it stops being valid and a state: Verified, or "Expires in 63 days" for any document ending within 90 days. The third says when Vendhurst writes to the contact about the one that expires first. For vendor and supplier onboarding, compliance and any record with expiry dates.

FAQ

What stays in the page, and how do I wire it for real?

Nothing was verified or sent. The four documents, the vendor and the portal address are typed sample data (the address ends in .example), and the only thing the page does is copy that address through the browser's clipboard. To wire it, build DOCS from your compliance records (a verified day and a valid-until day, empty when it never expires), set AS_OF from the day you render and point the header button at your portal.

Where does Expires in 63 days come from?

From the dates. Every count is the difference in whole days between the typed AS_OF and a document's valid-until day, worked out in UTC, never from the clock; a document that ends within SOON days (90) shows a clock and the count, any other shows a check and Verified. The foot's date comes from the same list: the document that ends first, and REMIND (30) days before it.

How is the table built?

It's a native table on every base, with a caption for assistive technology, column headings and each document's name as a row heading, inside a scrollable named region.

Is a state only a color?

No. Verified is a check and the word; an expiring document is a clock and "Expires in 63 days" in a heavier weight, in light and dark alike.

Does the copy button really work?

Yes. It writes the full address to the clipboard and a screen reader hears "Portal address copied" (or that the clipboard refused, which happens on a page not served over HTTPS). The field is read-only and left-to-right whatever the page's direction.

How does it look on a phone?

The header's button drops under the sentence, the address field fits the width and the table keeps the document and its state, with the verified and valid-until days written under the document's name. The field holds a long address, so it scrolls inside itself.

All 100 success blocks