Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Moment Gallery Awards Block for Radix UI

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

All 137 awards blocks