Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Animated Reveal Awards Block for React

Five results kept under drawn seals: a Reveal button per row and a Reveal all toggle wipe each band away, with the result text always in the page.

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

An envelope reveal for React with Base UI. A centred header gives the totals ("3 wins, 1 highly commended, 1 runner-up"). Below, five categories sit as rows of two cells on shared hairlines: the category with its own Reveal button, and a result cell covered by a drawn sealed band. Reveal wipes the band away toward the end of the line with a clip-path transition; under reduced motion it goes at once. A Reveal all toggle opens or closes every row and a polite line counts them. A placing is told by its word and its chip: solid, outlined or dashed. The programme and the results are made up for the example, and nothing is sent anywhere.

FAQ

How do I change the results?

Edit RESULTS: each has a category, a placing (Winner, Highly commended or Runner-up) and a citation. The header's totals are counted from the list.

Is the result hidden from screen readers?

No. The result's words are always in the page, and only the drawn band covering them is hidden from assistive technology. The seal is a picture, so a screen reader user hears every result.

What about reduced motion?

With reduced motion the band disappears at once with no wipe. Nothing moves by itself, only after you press a button.

How does Reveal all work?

It is a toggle button: pressed means every row is open. Pressing it opens all five, and pressing it again covers them. Opening each row by hand also presses it once the fifth opens.

Does it work on a right-to-left page?

Yes. The wipe runs toward the end of the line, so it mirrors, and the layout uses logical sides.

Are these real results?

No. The programme, the platform and the results are made up for the example.

  • Pro

    Vote Results Bars Awards

    Rankings and scores

    Horizontal progress bars for six nominees sorted by votes, with a segmented control that swaps votes for share, a ringed winner row, a derived total and a fixed certification date.

  • Pro

    Three Step Podium Awards

    Rankings and scores

    A podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.

  • 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

    Medallion Flip Awards

    Badges and seals

    Five drawn coin medallions that a Front and Back toggle turns over together, a front emblem and a back year, with each side's text kept in the page.

  • Pro

    Press to Flip Award Cards

    Reveal and browse

    Six award cards in a hairline grid that are each a button flipping on press or Enter, from a drawn mark and the award to the entries it was selected from and its judging criteria.

  • Pro

    Music Nominations Awards

    Themed formats

    A ballot sheet on a paper-like panel: four categories, each with a nominee list and a box, the winner's box checked and labelled Winner.

All 137 awards blocks