Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Notification blocks

Pro

Achievement Notification Block for Radix UI

A medal shelf for a learning platform after a learner finishes a first project: eight drawn medals in a hairline grid with a New badge on the latest, and a popover on each medal with its criteria, a progress bar and the day it was earned.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Celebrate a finished project without a modal or confetti, with this achievement shelf for React with Radix UI. It is Levelhut, a learning platform, in one hairline frame with a plus mark on each corner: eight medals in a grid, four across and two across on a phone. Earned medals are drawn solid with the day they were earned, the others are dashed with how far along they are, and the newest, Project Pioneer, carries a "New" Badge. Pressing a medal opens a Popover with its criteria, a Progress bar and the words for it ("2 of 3 answers done"); one popover is open at a time. A quiet Mark all seen button clears the badge. The count at the foot is worked out from the medals. Guides draw the lines. For learning, fitness and community products.

FAQ

Is anything recorded?

No. Which popover is open and whether the badge is cleared live in the page and reset on reload. The medals are typed in MEDALS with how much is done, how much is needed and the day each was earned; in your app fill them from your progress service and clear "New" when you record that the learner has seen it.

How does a medal show earned, in progress and locked?

Earned medals are drawn with a solid outline and a tint, the day below. Medals in progress and locked ones are dashed, with "2 of 3" or "Locked" below. The state is also written in words in the button's name and in the popover, so no state depends on a line style alone.

How do the popovers work?

Each medal is a button that opens a non-modal popover under it. Escape closes it and returns focus to the medal, opening another closes the first, and the popover keeps its size under reduced motion because its animation is switched off.

How are the medals drawn?

As one small SVG component: a ribbon, a circle and a glyph from a stroked path in a 24 by 24 box, all in the text colour. They are decoration, hidden from assistive technology, with the name and state in the button.

Is it accessible?

Every medal is a real button named like "Night Owl, 3 of 5", the grid is a labelled list, and the popover is reachable by keyboard. One polite status line answers Mark all seen, and the button stays focusable and readable once there is nothing left to mark.

How does it look on a phone?

Two medals across, four rows, with the status line and the earned count under the grid. The cells keep the same size whether or not the badge shows.

All 100 notification blocks