React Compliance Wall

Copy Page

In regulated markets a missing certificate ends the conversation before the technical evaluation starts. This is the grid of badges that gets you past that gate — and, one click deeper, the scope and certificate number the buyer's compliance officer will actually ask for.

Installation

Props

Certification is { id, name, level?, status, issuer?, certificateNumber?, validUntil?, scope?, href? }. status is one of "certified", "in-progress", or "expiring" — in-progress badges render dashed so they are visually distinct at a glance, not just by label.

Scope is the whole thing

A certification badge without a scope is close to meaningless, and experienced buyers know it. "FIPS 140-3 Level 3" applied to a module boundary that excludes the part they care about has failed them, and they have been burned by it before.

So the detail panel leads with scope — say exactly what the boundary covers. Then:

• Show renewals honestly. The expiring status exists so you can display a certificate in its renewal window rather than quietly removing it. Buyers respect the disclosure and would have checked anyway.
• Distinguish self-certified from third-party assessed. Put the assessor in issuer; if it is self-certified, say so there.
• Link the certificate. href should point at the issuing body's record where one is public — CMVP and BSI both publish searchable registries, and a link there is worth more than any badge you draw yourself.

Never show a certification you do not hold, including as a placeholder during development. In this domain that is not marketing overreach — in several jurisdictions it is a criminal misrepresentation.