Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Giving Thermometer Philanthropy Awards Block for Radix UI

A giving thermometer for a charity-checkout widget, filled to the year's total with ticks at each quarter of the goal and a flag where a prize grant arrived, beside a ledger table of causes and amounts.

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 giving thermometer for React with Radix UI. A split: at the start, a header and a ledger table of five causes with each cause's round-ups, the matching (every round-up matched 1 to 1) and its total, then the prize grant and a totals row; at the end, a framed figure with a thermometer drawn in CSS and filled to the year's total against the annual goal, with ticks at 25, 50, 75 and 100% and a flag where the grant arrived. The total, its share of the goal and the grant's date are also in text. From lg the thermometer stands upright beside the ledger; below it the tube lies on its side above the table. Every figure is derived from the typed lists at the top. The page's rails and top rule come from the Guides spine. It's built from Guides, a native table and your theme's tokens. The Spruceford Prize, Openhand and the causes are made up for the example.

FAQ

How do I change the causes, the goal and the grant?

Edit the constants at the top of the file: CAUSES (a name and the round-up dollars each), MATCH_RATE (1 for matched 1 to 1), GRANT (its amount, what the fund held before it arrived, and its date) and GOAL. The ledger rows, the totals, the thermometer's fill, the flag's position and the share of the goal are computed from them, so the sums in the header, the table and the drawing always agree.

How is the thermometer drawn?

It is plain boxes, not a chart library: a tube with a bulb, a fill whose length is a CSS variable set from the total, a tick and a label for each quarter, and the flag. The same elements are positioned along the tube in both orientations, across on a phone and up from lg, so there is one drawing and nothing is duplicated. It is hidden from assistive technology; the total, the goal, the share and the grant are in the text beside it.

What does the flag mark?

The point on the goal the fund reached when the grant arrived: the amount it held before, plus the grant. Move GRANT.before and the flag moves with it. Its date is a fixed time element, never computed from today.

Is the prize real?

No. The Spruceford Prize, Openhand and the causes are made up for the example. The figures are example data, not results: replace them with your own.

How does the table read on a phone?

The four columns are narrow enough to fit at 320 pixels, and the table sits in a scrollable region that a keyboard can reach if you add wider columns. Each row has a row header, the grant row says there is no matching, and the totals row sums the three columns.

All 137 awards blocks