shadcn.io is not affiliated with official shadcn/ui
Conference Talk Ledger Awards Block for React Aria
A split with a title and tally at the start and a ledger of five talk awards at the end, each row a drawn calendar tile, the event, the talk, the award and the speaker.
Installation
Overview
A conference awards ledger for React with React Aria. A split behind a solid divider: at the start a title, a sentence and a tally counted from the list ("5 talk awards in 5 cities, 2021 to 2025"); at the end an ordered list of five awards won at one touring conference, newest first. Each row opens with a drawn calendar tile (the month on a solid band over the day), then the event with its city, the title of the talk, the award as an outlined chip with a small drawn medal, and the speaker with an initials avatar. On a phone the header sits over the ledger and each row stacks the award and the speaker under the talk. The conference, the talks and the speakers are made up for the example: replace TALKS with your own.
FAQ
How do I change the talks?
Edit TALKS: each has a fixed ISO date, a city, a talk title, an award, and the speaker's speaker name and initials. The calendar tile, the event title, the year and the header tally are all derived from the list.
How are the dates shown?
Each tile is a time element with its ISO date. The month and day are drawn, and the year is spoken for assistive technology. Dates are read in UTC so the server and the browser always agree.
Are those photos of speakers?
No. They are initials avatars, hidden from assistive technology because the speaker's name is in the row as text. Swap in photos if you have permission to use them.
What do screen readers hear?
An ordered list named "Talk awards"; each row reads the date, the event as a heading, the city, "Talk:" and its title, "Award:" and its name, and "Speaker:" and the name.