Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Receipt Slip Awards Block for React

Awards printed as a thermal receipt: a torn-edge slip with mono line items, dotted leaders, a derived subtotal, a verified stamp and a drawn barcode.

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 receipt for React with Base UI. A reverse split puts a narrow, card-coloured slip in a framed panel at the start and the copy at the end (the copy is first in the reading order). The slip has a zigzag torn edge at the top and the foot, drawn by a repeating conic mask, and is set in mono type: a store header, one line per award with a dotted leader to its year and the programme under it, a Subtotal line ("5 awards"), the programmes and years counted from the same list, a "Verified" stamp that lands once, and a drawn barcode. Beside it, a heading and three counts. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.

FAQ

How do I change the line items?

Edit ITEMS: each has an award, a programme and a year. The subtotal, the programme count, the year range and the three counts beside the slip are all counted from that list, so they always match the lines.

How is the torn edge drawn?

Two repeating conic-gradient masks, one for the top and one for the foot, cut a zigzag with 14 px teeth out of the slip. There are no images, and the edge follows the card colour in either theme.

Does the stamp move for everyone?

The Verified stamp is the StampText item: each letter lands once when the page loads. With reduced motion the word is simply there, still tilted. The word is in the page as text either way.

What does a screen reader hear?

A definition list: each award is a term, with its programme and year as descriptions, then the subtotal lines. The dotted leaders and the barcode are drawings hidden from assistive technology.

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

Yes. The layout uses logical sides, years and counts sit in bdi elements so numbers keep their order, and the split mirrors.

Are these real awards?

No. Every programme, award and the product are made up, and the dates are fixed in the data.

  • Pro

    Certificate Awards

    One featured award

    A formal certificate of award as HTML with a double hairline frame, a drawn laurel, the recipient, a citation, two signature strokes and a seal, beside a details list and an outline Verify link.

  • Pro

    Terminal Log Awards

    Themed formats

    Awards printed by a command-line toolkit in a terminal window, with a toggle group of three commands that swaps the output without moving the page.

  • Pro

    Playlist Format Awards

    Themed formats

    Awards as a tracklist: a now playing card with a drawn record, an ordered list of seven tracks chosen by arrow keys, and a Shuffle toggle. No audio.

  • Pro

    Total Tally Awards

    Lists and tables

    A scoreboard table for an accounting app: years down the side, the three tiers (grand prize, winner, finalist) and a total across, with column totals in the foot row, all counted from one list of entries.

  • Pro

    Criteria Checklist Awards

    Rankings and scores

    Two awards a code-quality scanner is working toward as cells with overshoot lines: a progress bar, a count and five criteria each, met or in review, with the last explained in a disclosure.

  • Pro

    Compact Badge Strip Awards

    Strips and banners

    A framed awards bar for tight spaces: a bold lead, four outline badges with a small drawn laurel or medal, the award and the year, and a counted tally.

All 137 awards blocks