shadcn.io is not affiliated with official shadcn/ui
Achievement Ribbon Banner Block for React Aria
A centred milestone card for a running app: a corner ribbon reading Unlocked, a trophy, a heading, one sentence, a track of five pips with three earned, the next milestone named, and a Shine Button.
Installation
Overview
An achievement card for React with React Aria. A centred card framed by + marks on its corners wears a ribbon across its start-top corner reading "Unlocked". Under it: a trophy, "First 10K achievement earned", one sentence, a track of five pips (three filled with a check, the next one outlined, the last one quiet), the line "Next: 100 runs · 3 of 5 earned", and an outline Shine Button, View details. The ribbon is a rotated strip of plain CSS, clipped by the card's own box; the frame's marks sit outside the clip, and in a right-to-left layout the ribbon turns to the other corner. The page's rails and top rule come from the Guides spine. It's built from Guides and Shine Button, with your theme's tokens for every colour. For milestones, badges, streaks and any moment that deserves a card of its own.
FAQ
How do I change the milestones?
Edit MILESTONES at the top of the file: a name and whether it's earned. The number earned and the "Next" line are derived: the next milestone is the first one not earned, so marking another as earned moves the outline and the text with it. Keep five pips so they fill the track; each pip's name is read out by screen readers with ", earned" for the earned ones, and the track is named with the count.
How does the corner ribbon work?
It's one span: a 9rem strip, turned 45 degrees with -rotate-45, parked across the corner with logical offsets (-start-9 top-7) inside a box that has overflow-hidden and the card's rounded corners, so the strip's ends are cut off by the card. The frame's + marks live on a sibling outside that box, because a clip would cut them too. Its label is real text, so a screen reader reads "Unlocked" before the heading.
What happens in a right-to-left layout?
The ribbon moves to the end-top corner, which is on the other side, and turns the other way (rtl:rotate-45), so it keeps crossing the corner the same way. The track and the pips follow the reading direction, with the earned ones starting on the right.
Where does the button go?
View details is a link (href="#"): point it at the achievement's page. It's an outline Shine Button, small; a band of light sweeps across it once on hover and keyboard focus.
It renders a link because it has an href.