shadcn.io is not affiliated with official shadcn/ui
Breakthrough Cards Innovation Awards Block for Ark UI
Three breakthrough awards for a speech-to-text API, each beside a tiny greyscale drawing of what won (a diff, a stack of toggles, a latency graph) with a What was new sentence.
Installation
Overview
A set of three breakthrough cards for React with Ark UI. A centred header counts the awards from the list, and under it three cards sit in cells with their corners overshooting. Each card shows the thing that won in a framed window drawn in greyscale: a diff of a transcript with one line removed and one added, a stack of three toggles, and a graph where the delay stays flat while the old curve climbs. Under the drawing, the award is a heading with the programme and year, and a "What was new" sentence says what changed. Three across from lg, one column below it. The page's rails and top rule come from the Guides spine. It's built from Guides, small SVG and CSS shapes and your theme's tokens. The Flintfield Prize, Mandrake and the breakthroughs are made up for the example.
FAQ
How do I change the breakthroughs?
Edit BREAKTHROUGHS at the top of the file: each has a name, the whatWasNew sentence, the fixed year and the drawing (diff, toggles or graph). The header counts the list. To add a drawing, write one more small component in the same Window and add it to drawingOf.
What are the drawings, and can screen readers see them?
They are pictures of a screen, built from boxes and one SVG in the foreground and faint mixes of it, so they follow your theme. They are hidden from assistive technology on purpose: what they show is said in the text under them. Replace one with a screenshot as an img with a real description if you prefer.
Are these real awards?
No. The Flintfield Prize and Mandrake are made up for the example, and so are the breakthroughs. Use your own awards, and an award body's official mark only where its rules allow it.