shadcn.io is not affiliated with official shadcn/ui
Spotlight Dialog Awards Block for Ark UI
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.
Installation
Overview
A spotlight grid for React with Ark UI. Under a centred header, six awards sit in tiles that share their hairlines, run rail to rail and end the block: each tile is a button with a drawn trophy in your theme's foreground, the award and its year, three across on a wide screen and two on a phone. Pressing a tile opens one centred dialog, the same dialog for every tile, with a large drawing, the programme and year, why the award was won, and its category, entries judged and prize. A "2 of 6" counter and Previous and Next buttons step through the awards without closing; the arrow keys, Home and End do the same, Escape closes it, and closing returns focus to the tile of the award last shown. On a phone the dialog fills the screen. It's built from the catalog Dialog, Data List, Button and Guides. The awards and programmes are made up for the example: swap AWARDS for your own.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file. Each has a title, programme, category, a fixed year, the number of entries judged, the prize, a why sentence or two and a mark, one of the six drawings above it (a drawing is a few paths in a 64 by 64 box). The tally in the header is counted from the list. For a different number of tiles, make it a multiple of three so no cell of the grid is left empty.
Which keys work while the dialog is open?
The arrow keys step through the awards (mirrored in a right-to-left page), Home and End jump to the first and last, Escape closes, and Tab stays inside the dialog. The block listens on the document in the capture phase so the keys also work while focus is on a button inside the dialog.
Where does focus go when it closes?
To the tile of the award shown last: step to the fifth award, press Escape, and the fifth tile has focus. Each tile has its own id built with useId.
The Dialog's finalFocusEl returns the tile.
What does it look like on a phone?
Two tiles across, three rows. The dialog fills the screen with a bar for the counter and the close button, the drawing and the details scrolling in the middle, and Previous and Next side by side at the foot. On a wide screen it's a centred card with the drawing beside the details.
Are these real awards?
No. Ivorydale is a made-up streaming service and Quartzworth, Wickerdale, Norwenna, Coppermere, Emberholt and Foxgrove are made-up programmes; the figures and prizes are written for the example. The trophies are drawn by the block.
How do screen readers meet it?
The tiles are a list named for Ivorydale's awards, each a button inside a heading, so a screen reader's heading list shows every award. The dialog is named by the award's title, described by the programme and year, and a polite line announces the award and its place each time it changes. The drawings are hidden from assistive technology.