React Awards Strip

Recognition ages. This puts the year on every item and sorts newest first, because undated accolades are the oldest trick on a vendor site and an informed buyer discounts them entirely.

Recognition — inline variant

  • Leader — Embedded SecurityVantage Analyst Group · 2026
  • Innovation AwardEmbedded World · 2026
  • Top 10 Post-Quantum VendorsCyberDefence Review · 2025
  • Best Silicon StartupSemicon Europa · 2024

Installation

npx shadcn@latest add "https://kelvinui.com/registry/awards-strip.json"

Props

PropTypeDescription
itemsRecognition[]{ id, title, source, year, category?, href? }
titlestringEyebrow above the row
variant"cards" or "inline"Card grid, or a compact single row

Year is required in the type

year is not optional on Recognition — that is a deliberate API decision rather than an oversight. An award with no date invites the reader to assume it is current, and when they find out it was 2019 you have spent more credibility than the award was worth. Making it required means you cannot ship the undated version by accident.

Items sort by year descending, so the top of the strip is always your most recent recognition. category carries the qualifier that keeps a placement honest — "Leader, Industrial IoT quadrant" is a different claim from "Leader", and stating the narrower one reads as more confident, not less.

Link out via href wherever the issuing body publishes a public record. A placement a reader can verify on the analyst's own site is worth several that they cannot. Pair with the Compliance Wall for certifications, which are a different kind of proof: awards are opinions, certificates are audits.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.