Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Trend Arrows Awards Block for Solid

A ruled table for an investing app comparing five award measures this year and last year, with the change as an arrow icon and words (up 4, flat, down 1) so a change is never told by colour alone.

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 year-on-year measures table for Solid with Ark UI. Five rows (awards won, shortlists, categories won, programmes and win rate) sit under a ruled head with this year's figure, last year's and the change, each change an arrow icon and words in a small outlined chip: up 4, flat, down 1, up 19 points. A sentence in the header is counted from the same list. On a phone last year's column drops and the change stays. The page's rails and top rule come from the Guides spine, and the rows end the block. It's built from Guides, a native table and Lucide icons. The programmes and results are made up for the example.

FAQ

Where do the figures come from?

From ENTRIES at the top of the file: each entry has a programme, a category, a fixed year and a result, won or shortlisted. Every measure is a small function that counts one year of that list, so adding an entry changes the table and the header sentence together. The two years shown are the latest in the list and the one before it.

How is the win rate worked out?

Awards won divided by every place in a shortlist, wins included, rounded to a whole percent. A change in the rate is written in points ("up 19 points"), not as a percentage of a percentage. Shortlists are the places that did not win.

How does the table avoid colour?

The change is three things at once: an arrow, a word and the size, and the chip's outline is solid for up, lighter for down and dashed for flat. Nothing is green or red. The arrows point up and down, so a right-to-left page does not mirror them.

How do I add a measure?

Add an entry to MEASURES with a title, a note, a function that returns the figure for a year, and how to write it. Use unit for a word that follows the change, as the win rate does with points.

What changes on a phone?

Last year's column is hidden so the measure, this year's figure and the change fit without scrolling; the change already says how far this year moved. The table sits in a keyboard-reachable region in case a wide layout of your own needs to scroll.

How does it read to a screen reader?

As a table with a caption, column headers and a row header on each measure, so a cell reads as its measure and column. The arrows are hidden from assistive technology and the change reads as its words ("up 4").

All 137 awards blocks