Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Achievement Ribbon Banner Block for React

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.

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

An achievement card for React with Base UI. 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 the link it's given with render, with nativeButton={false}.

What moves, and what happens with reduced motion?

The card fades up once when the page loads, with a CSS transition. With reduced motion the transition is off and the card simply appears.

How does it fit on a phone?

The card keeps its padding and everything stays centred. The pips share the width in five equal columns, the line under them wraps if it must, and the ribbon stays on its corner. At 320 pixels nothing scrolls sideways.

  • Pro

    Guarantee Ribbon Banner

    Stacked cards

    A centred refund guarantee for a notebook app: a corner ribbon reading Secured, a shield, a heading, one sentence, the 30-day window drawn as a bar of thirty cells, and fine print under a rule.

  • Pro

    Corner Ribbon Banner

    Stacked cards

    A start-aligned early-access card for an API platform: a corner ribbon on the end-top corner, a sparkle, a heading, two sentences, a data list of three facts and a link to the migration guide.

  • Pro

    Centered Stacked Banner

    Stacked cards

    A centred bonus offer for a music-learning app: a gift tile, a Limited time badge, a heading, a strip of fifteen month cells with the last three outlined as free, and a Shine Button.

  • Pro

    Activity Proof Stacked Banner

    Stacked cards

    A centred social-proof card for a team workspace: a line saying who and how many teams upgraded this week, with the count rolling up, a sentence, a ringed avatar stack and a Shine Button.

  • Pro

    Toast Pill Banner

    Pills

    A saved-settings toast pill for a settings panel: a success check, a message, an Undo button wearing a ring that drains over six seconds, and a dismiss button.

  • Pro

    Stacked Download Card Banner

    Stacked cards

    A centred download card for a desktop sketching app: a version badge, a heading and a sentence over a tinted band with a three-platform segment control and a download button that runs idle, downloading and done.

All 100 banner blocks