shadcn.io is not affiliated with official shadcn/ui
Achievement Badges Carousel Block for Radix UI
Twelve drawn medallions on a free-scroll rail with edge fades and a position line, and a side cell that reads Earned 7 of 12 over a ring legend.
Installation
Overview
Show a collection with a fling instead of pages, with this achievement badges carousel for React with Radix UI. Ribbonry, a team-recognition app, lists twelve medallions on a free-scroll rail with no dots: a fling stops where it stops, an edge fade appears only on a side that has more, and a thin line under the rail shows how far it has scrolled. A medallion is concentric rings drawn in SVG, one for Common up to four for Legendary, with a two-letter mark, the name, the tier and points in tabular figures; a locked one has a dashed, fainter ring and says "Locked" in words. A side cell reads "Earned 7 of 12" with the points so far and the ring legend, and stacks under the rail on a phone. The foot holds the counter, the position line and Previous and Next Buttons, which move about three medallions. The bands are ruled by Guides. The app and its medallions are made up for the example.
FAQ
How do I add my own badges?
Edit MEDALS. Each has an id, a name, a two-letter mark, a tier from 1 to 4 (the number of rings) and an earned flag. Points come from the tier by one helper, and the earned count, the points so far and the legend are derived from the list.
How does the free scroll work?
A fling stops where it stops and no card snaps. The position line and the edge fades follow the page the track settled on.
The track uses Embla's dragFree, and the line follows the select event.
How does a locked badge read?
A locked medallion is dashed and faint, and the word "Locked" with a padlock sits under its name. The state is never told by the drawing alone.
How does it work with a keyboard?
Tab reaches the controls and Previous and Next. With focus inside the track's panel, the arrow keys move the track (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears.