Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Origin Story Awards Block for React

The story of one award submission for a note-taking app: a prose column with a pull-stat counted from the milestones, a rail of dated milestones from Week 1 to Week 40 and a drawn plaque to finish.

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 award origin story for React with Base UI. A start-aligned header, then a split behind a solid divider with + marks. The prose column holds a subheading, three short paragraphs and a pull-stat ("40 weeks") counted from the last milestone; the rail at the start from the lg breakpoint lists the milestones, Week 1 to Week 40, as nodes on a hairline. On a phone the rail becomes chips above the text. The block ends on a band holding a drawn plaque: a laurel wreath and the award's lettering. It's built from Guides, the catalog Prose, an inline SVG laurel and your theme's tokens. It tells the story of one submission; the company's own story is about-origin-story. The award, the programme and the story are made up for the example: replace them with your own.

FAQ

How do I change the story and the milestones?

The three paragraphs are plain text in the two Prose blocks. The milestones are MILESTONES: a week and a title each. The pull-stat and the header's "6 milestones in 40 weeks" line are counted from that list, so the last week sets the number.

Can I show a real plaque?

Yes. The plaque is a figure with a laurel drawn in SVG and a caption holding the programme, the award and the year as text. Replace the laurel with an img of your own plaque and keep the caption.

Why is the prose first in the code?

So the reading order is the story. The rail is supporting detail, so it comes after the prose in the document, and the layout places it at the start of the row from lg and above the text on a phone with grid placement and order classes.

Why Week 14 and not a date?

These milestones are relative to the entry's own calendar, counted from the first draft. They are text in a bdi element, so the whole phrase keeps its order in a right-to-left layout.

What do screen readers hear?

The heading, the subheading and the paragraphs, with the pull-stat as a figure and its caption, then the milestones as a list ("Week 1, Entry drafted") and the plaque's caption. The nodes and the laurel are hidden drawings.

What changes on a phone?

The rail's hairline and nodes give way to wrapping chips, one per milestone, placed under the header. The prose follows, and the plaque band closes the block.

  • 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.

  • Pro

    Milestone Lanes Awards

    Timelines

    Two lanes on one quarter axis for a roadmap tool: company milestones above, awards below, a stepped hairline from each award to the milestone before it and the gap counted in months.

  • Pro

    Featured Plaque Awards

    One featured award

    One grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.

  • Pro

    Spotlight Dialog Awards

    Reveal and browse

    A 3 by 2 grid of award tiles that each open one centred dialog with the full details, a counter and Previous and Next, with arrow keys cycling.

  • Pro

    Chaptered Origin Story About

    Company story

    A company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.

  • Pro

    Class Plaques Hall of Fame Awards

    People and teams

    A hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.

All 137 awards blocks