Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Ceremony Run Of Show Awards Block for React

A run of show for an awards night: an ordered list of the evening with its times, Lanternhall's two award moments in heavier type, and at the start a drawn stage and a description list of the facts.

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 ceremony recap for React with Base UI. The evening as it ran, in order: an ordered list from 18:30 doors to 21:10 close, each row with its time and a line of detail, and the two moments the product won set in heavier type with a small drawn mark. From the lg breakpoint a framed drawn stage (curtains, a screen, a lectern and three round tables, in greyscale) and a description list of the night's facts (date, venue, hosts, categories and how many were won, counted from the list) sit at the start behind a solid divider with + marks. On a phone the run of show comes first, then the stage and the facts. It's built from Guides, the catalog DataList, inline SVG and your theme's tokens. The programme, the venue and the people are made up for the example: replace them with your own.

FAQ

How do I change the evening?

Edit RUN: each row has a time (24-hour, as the venue's clock), a title and a detail; set award: true and a shape on the moments that deserve the heavier type and the mark. The header's "doors at, close at" line and the count of awards won come from the first row, the last row and the awards in the list. The facts are DATE, VENUE, HOSTS and CATEGORIES.

Can I use a photo of the stage?

Yes. The stage is a drawing in a figure with a caption; swap the Stage component for an img of your own and keep the caption. A comment in the file marks the place.

Why does the run of show come first in the code?

So the reading order is the story: the heading, then the evening, then the facts. From lg the stage and facts are placed at the start of the row with grid placement; the document order does not change.

What do screen readers hear?

An ordered list named "Run of show", each moment a heading with its detail, and its time in a time element. The award moments read the same way, only larger on screen. The stage drawing is hidden from assistive technology; its caption is read.

What about right-to-left layouts?

Times and dates sit in bdi elements so they keep their order, and the columns mirror: the run of show moves to the start side and the stage to the end. The drawn stage is symmetric.

Are these real people and places?

No. The programme, the venue and the hosts are made up for the example, and the date is fixed in the file.

  • 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

    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

    Moment Gallery Awards

    Reveal and browse

    A large drawn stage scene with the event details in its caption and a filmstrip of five moments you choose by radio buttons, in greyscale SVG, never photos.

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

  • Pro

    Three Step Podium Awards

    Rankings and scores

    A podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.

  • Pro

    Year In Review Awards

    Charts and figures

    A recap of 2025 for a podcast app: a 2025 compared with 2024 description list of four figures with their change in words, a ranked list of the top three awards with drawn seals and three dated milestones.

All 137 awards blocks