Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Conference Talk Ledger Awards Block for React

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.

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 conference awards ledger for React with Base UI. 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.

What happens on a phone?

The rows keep the tile at the start and stack the award chip and the speaker under the talk, one row per award.

Are these real events and people?

No. The conference, the talks, the speakers and the product are made up for the example. The cities are real places named in text.

  • 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

    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

    Regional Tabs Awards

    Filters and search

    Underline tabs by region with a count on each, a local office line and two columns of local awards with a drawn mark, the programme, the country code and the year.

  • Pro

    Raised Card Showcase Awards

    Cards and grids

    Three awards on one raised card for a storefront platform, each row a drawn mark, the award, its programme, a one-line reason and the year, with a centred header and a Shine Button to all awards.

  • 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

    Talks Accordion About

    Press and recognition

    The talks of a conference app's team as accordion rows under an Upcoming and Past switch: a title, the event, the kind of talk and when, opening to the abstract, the speaker and a Slides link.

All 137 awards blocks