shadcn.io is not affiliated with official shadcn/ui
Recognition Sidebar Awards Block for React Aria
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.
Installation
Overview
A recognition sidebar for React with React Aria, 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.