Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Verification Lookup Awards Block for Ark UI

A certificate number lookup with a labelled field and a Shine Button, sample numbers as chips and a live result panel that reads Valid, Expired or Not found against four typed records.

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

A certificate lookup for React with Ark UI. A split on a divider: at the start the header, a labelled field for a certificate number with a Shine Button "Verify" inside it, a line saying what it really checks, and sample numbers as chips. At the end a result panel, a polite live region, reads the record for the number: Valid, Expired or Not found, each with a dot, an icon and the word, then the holder, award, programme and days. Four typed records back it, a number is valid or expired by comparing its last day with a fixed day, and any other number is not found. The panel holds its height for every outcome, so nothing moves. The page's rails and top rule come from the Guides spine. Octavian, the Russetwick Awards, the holders and the numbers are made up, and nothing leaves the page.

FAQ

How do I add or change the records?

Edit CREDENTIALS at the top of the file: each has a number, holder, award, programme, the day issued and the last day. The sample chips are made from the list, and the lookup matches a typed number after removing spaces and capitalising it, so lower case and stray spaces still match.

How are Valid and Expired decided?

By comparing the record's last day with AS_OF, a fixed day. On or after it the record is Valid and shows the days to go; before it the record is Expired and shows how many days ago it ended. A number that is in no record is Not found. Set AS_OF yourself, or use your own check, in a real page.

Does it call a server?

No. The line under the field says so: it checks this page's four sample records and nothing is sent. To make it real, replace lookup with a request to your register and keep the three outcomes and the reserved-height panel.

How are results announced?

The result panel is a polite live region that is on the page from load, so a screen reader hears the new outcome when you press Verify or pick a chip; focus stays on the control you used. An empty submit shows a message under the field and moves focus back to it. The status dot is a drawing; the word beside it says the state.

Does the page move when the result changes?

No. Every outcome is drawn once, unseen, in the same cell as the live panel, so the panel is always as tall as the tallest one and the block keeps its height at every width.

How does it fit on a phone?

The parts stack: the header, the field, the chips (they wrap), then the result panel under a thin rule. The field and button share one row down to 320 pixels. In a right-to-left layout the split mirrors, while certificate numbers stay left to right.

All 137 awards blocks