Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Announcement Bar Awards Block for React

A slim announcement bar for one headline award: a drawn laurel, one sentence naming the award and the programme, and a Read the story link.

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

A slim awards announcement for React with Base UI, to open a page or sit above a pricing table. Under the page's top rule and nothing else, the catalog Announcement is one link: a small drawn laurel at its start, "Kindling wins Best Developer Platform at the Cinderley Software Prize" and a muted "Read the story" with an arrow. On a phone the laurel goes, the sentence takes two lines and the link drops under it. It is built from Announcement and Guides, follows your theme and has one short fade on load. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.

FAQ

Which award should it name?

One: your most recent and best known. A bar that rotates between awards says less than the one it picked; the other blocks in this category are for lists.

Is the award real?

No. The company and the programme are invented for the example.

Can it be dismissed?

No: it is part of the page, not a notice, and it has no state. For a bar a visitor can close, use one of the banner blocks.

What happens in a right-to-left page?

The laurel is symmetric, the arrow turns around and spacing is logical.

How does it fit on a phone?

The sentence wraps to two lines, "Read the story" under it, the bar inset a little from the page rails. Nothing scrolls sideways at 320 pixels.

  • Pro

    News Crawl Ticker Awards

    Strips and banners

    One bar with a single line of dated award announcements crawling by a CSS keyframe, with a pause button and a still, wrapped line under reduced motion.

  • Pro

    Compact Badge Strip Awards

    Strips and banners

    A framed awards bar for tight spaces: a bold lead, four outline badges with a small drawn laurel or medal, the award and the year, and a counted tally.

  • Pro

    Top Bar Banner

    Top bars

    A slim announcement strip for a writing app's release: one centred line with the version, the news and an underlined link, and a ghost button that folds the strip away.

  • Pro

    Info Alert Banner

    Alerts

    An in-page info callout for an invoicing app: a card in card with an info icon, a heading, two sentences about a change coming next month, a Shine Button link and a dismiss button that folds the block away.

  • Pro

    Achievement Ribbon Banner

    Stacked cards

    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.

  • Pro

    Dual Marquee Awards

    Strips and banners

    Two rows of award pills moving in opposite directions, each with a drawn mark, the award, the programme and the year, and a visible pause button.

All 137 awards blocks