Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Recognition Sidebar Awards Block for React

A page excerpt with a recognition sidebar: an article about a knowledge-base tool taking two thirds and an aside beside it listing five awards with a drawn mark, the programme and the year.

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 recognition sidebar for React with Base UI, shown the way a visitor meets it: beside content. From lg, two thirds hold an article (a heading and two short paragraphs about the product) and the last third is an aside named Recognition, set off by a divider that carries a + mark where it meets the top rule. In it a stacked list of five awards: a small drawn mark (strokes only), the award, its programme under it and the year at the end. On a phone the aside follows the article under a rule. It is built from Guides, inline SVG and your theme's tokens, with a CSS transition for the entrance. The product text, awards and programmes are made up for the example: replace them with your own page.

FAQ

How do I put it beside my own content?

Replace the article's heading and paragraphs with your page's. The grid is lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)], so anything you put in the first cell gets two thirds. Keep the aside as the second child so it follows the text on a phone.

How many awards fit?

Four or five, one line each. A sidebar this narrow has no room for descriptions, which is why each row has only the award, its programme and the year.

How is it labelled for screen readers?

The aside is a complementary landmark named "Recognition" and holds a list; each award is a h3 with its programme under it. The drawn marks are hidden from assistive technology, and the page heading above is the block's h2.

Can I use other marks?

Add a shape to SHAPES (strokes in a 24 by 24 box) and name it in an award's shape. The set includes a laurel, a star, a medal, a cup and a rosette.

Are these real awards?

No. Oswin and the Basaltbrook programmes are invented for the example.

How does it fit on a phone?

The article comes first, then a rule and the aside, each row keeping its mark, text and year. Nothing scrolls sideways at 320 pixels.

  • Pro

    Four Columns Awards

    Cards and grids

    Four tall award columns for a sports-analytics tool, each with a drawn mark, the award, programme, category and year, over a band of three figures counted from the list: awards, programmes and years running.

  • Pro

    Minimal Typography Awards

    Lists and tables

    Awards as pure typography for a writing app: five lines between hairlines, each the year in tabular figures, the award at heading weight and its programme muted, with no drawings, icons or buttons.

  • 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

    Rating and Laurels Trust Bar Awards

    Strips and banners

    One trust line: a read-only rating with its score and review count, three small laurels with their awards, and a ghost link to all the recognition.

  • Pro

    Seal Row Awards

    Badges and seals

    A free row of six drawn award seals, each a different silhouette, with the award, its programme and the year under it, and one counted line below.

  • Pro

    Year Rail Timeline Awards

    Timelines

    A vertical rail of awards by year for a planning tool, a node for each year on a solid hairline with its awards as rows, and the older years behind a View earlier years Collapsible.

All 137 awards blocks