Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Moment Gallery Awards Block for React

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.

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 stage with a filmstrip for React with Base UI. A large scene is drawn in greyscale from SVG paths and CSS (curtains and a lectern, a trophy hand-off, the audience from behind, tables under pendant lamps, the doorway before the show), with a caption that carries the event details: title, venue, date and time, and a sentence. Under it, five thumbnails form a native radio group; arrow keys move between them. The stage and strip sit in one framed panel, and on a phone the strip scrolls sideways. The venue and programme are made up for the example. A comment on Scene says where a real photograph goes.

FAQ

How do I change the moments?

Edit MOMENTS: each has a title, a where, a fixed local when (ISO date and time), a description and a drawing kind. The count and the "Picture 2 of 5" line come from the list.

How do I use real photographs?

Replace the body of Scene with an <img> that has the same box, object-cover and a real alt. The caption and the strip stay as they are.

How does the keyboard work?

The strip is a native radio group: Tab enters it, the arrow keys move and choose, and the chosen thumbnail gets a heavier ring. On a right-to-left page the arrows follow the reading direction.

Does the page move when I choose?

No. The five captions share one grid cell and the stage keeps its aspect ratio, so the block's height holds.

What does a screen reader hear?

The pictures are drawings hidden from assistive technology. The caption holds the title, the venue, the date and time, and the description, and a polite line says which picture of five is shown.

Is this a real event?

No. The awards programme, the venue and the product are made up for the example.

  • Pro

    Ceremony Run Of Show Awards

    Timelines

    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.

  • Pro

    Studio Reel Awards

    Themed formats

    Award-winning projects as film frames in a snap-scroll reel: sprocket holes, a drawn greyscale poster, and the project, client, award and year in text.

  • Pro

    Carousel Awards

    Reveal and browse

    Eight awards for a hotel booking engine in the catalog Carousel, three plaques per view, each a drawn laurel with the programme, category and a jury line, with arrows, dots and a counter.

  • 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

    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

    Origin Story Awards

    Timelines

    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.

All 137 awards blocks