Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Edition Comparison Awards Block for Vue

A table by category for a usage-billing API comparing its placement at two editions of an awards programme, each row reading 7th to 3rd with an arrow, the places gained in words, a filled dot on a win and a total row.

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 two-edition comparison for Vue with Ark UI. A table with a row for each of eight categories shows the placement at last year's edition and this year's in one line ("7th to 1st"), the move as an arrow and words ("up 6 places"), and a filled dot with the word "Won" in the categories where it placed first. The foot row totals the wins, and the header counts the places gained across every category. Cells share hairlines both ways and the table ends the block. On a phone the dot moves in front of the category and the move's unit drops out of sight. It's built from Guides, a native table and Lucide icons. The programme and its results are made up for the example.

FAQ

How do I change the placements?

Edit PLACEMENTS at the top of the file: each category has the previous and latest placement as numbers, and the two edition years are PREVIOUS_YEAR and LATEST_YEAR. The ordinals (1st, 2nd, 3rd, 11th), the moves, the wins, the total row and the header sentence are all worked out from it.

What counts as a win?

Placing first in the category. Those rows get a filled dot and the word "Won"; the others show a dash with "Not won" for a screen reader. The foot row compares the number of wins in the two editions.

How is the move written?

As the number of places gained or lost: "up 6 places", "down 1 place" or "no change", with an arrow or a dash in a small chip. A lower number is a better placement, so going from 7th to 1st is up 6. Nothing relies on colour.

How is this different from the trend arrows block?

That block compares measures year on year (awards won, shortlists, win rate); this one compares one programme's placement category by category across two editions.

What changes on a phone?

The Won column is dropped and its dot moves in front of the category name, with "won" kept for a screen reader; the move's unit ("places") is hidden so the arrow and the number fit. Nothing scrolls sideways at 320 pixels.

Are these placements real?

No. Metronomic and the Orchidmore Awards are made up, and so are the categories and results. Replace them with your own.

All 137 awards blocks