Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Government Register Awards Block for React

Three public-sector register entries as cells apart, each with a drawn crest, a reference with a Copy button, lot, tier, last day and a standing worked out from a fixed day, plus an outline link to the official register.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A public-sector register for React with Base UI. A start-aligned header with an outline "Official register" link at its end, then three framework entries as cells apart, each with its own overshoot lines. A cell opens with a drawn crest (a shield with its own glyph) and the framework as the heading under the council's name, then the register reference in a mono box with a Copy button, then the lot, tier, last day and standing in a two-column list. Standing is worked out from a fixed day: "Active", or "Renewal due" inside 90 days of the end. The cells stack on a phone. The page's rails and top rule come from the Guides spine. The Tealworth Council, the frameworks and the references are made up and nothing links to a real register: replace them with your own entries.

FAQ

How do I change the entries?

Edit ENTRIES at the top of the file: each has a framework, lot, tier, reference and last day, plus glyph, one path in a 64 by 64 box drawn inside the shield. Add a fourth entry and the grid still reads well on lg if you change lg:grid-cols-3 to lg:grid-cols-4 or let it wrap.

How is the standing decided?

From AS_OF, a fixed day the block is read as of, and RENEWAL_WINDOW, 90 days. An entry whose last day has passed reads "Lapsed", one inside the window reads "Renewal due", and the rest "Active". The third entry is inside the window, so you can see both words.

What does Copy do?

It copies the reference exactly as shown (for example REG-20418) to the clipboard and says "Copied" to screen readers; if the clipboard refuses, it says so. Browsers allow the clipboard only on secure pages (HTTPS or localhost). The label of each button names the reference it copies.

Are these real frameworks?

No. The council, the framework names and the references are made up, and the crests are drawn by the block. They are not copied from any government body, and nothing here is a compliance claim.

How does it fit on a phone?

The header link sits under the sentence, and the three entries stack in one column, each cell the same shape. The reference box and the two-column list stay as drawn down to 320 pixels. In a right-to-left layout the cells mirror, while references and dates keep their order.

  • Pro

    Verification Lookup Awards

    Filters and search

    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.

  • Pro

    Certificate Awards

    One featured award

    A formal certificate of award as HTML with a double hairline frame, a drawn laurel, the recipient, a citation, two signature strokes and a seal, beside a details list and an outline Verify link.

  • Pro

    Six certification cells on shared hairlines, each with a foreground ring showing how much of the certificate's term has run, its name, issuer, last month and a standing worked out from a fixed day.

  • Pro

    Details Awards

    Cards and grids

    Three award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.

  • Pro

    A compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.

  • Pro

    Audit Table Footer

    Trust and compliance

    A footer for a backup vault with an audit table in a framed figure (the programme, its scope, how often it is audited and a link to request the report) beneath the brand and three link columns.