shadcn.io is not affiliated with official shadcn/ui
Pledge and Causes Charity Giving About Block for React
A split about a company's giving: the pledge as a percent of revenue and the matching rule at the start; five causes with progress toward what each was promised and a participation figure at the end.
Installation
Overview
A charitable-giving block for React with Base UI, written for Handbright, a fictional donation-matching platform that matches its own team's giving too. A split behind a hairline divider: at the start, the pledge, a percent of revenue set in the heading, with the matching rule (what the company matches, up to how much, and the paid volunteer days) in a small ruled panel. At the end, one Progress bar shows how far this year's pledge has got, then five causes are rows ruled edge to edge, each with a category badge, one sentence and its own Progress bar toward the amount it was promised. A closing line gives the share of the team that gave money or time. Every total and percentage is computed from the causes, so the bars and the words agree. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Progress and Badge, with CSS for the entrance and your theme's tokens for every colour. For about pages and impact pages that want to show giving as a commitment with receipts. The charities and the amounts are example data and the charities are fictional.
FAQ
How do I change the causes, the pledge and the matching rule?
The causes are CAUSES at the top of the file: a name, a category, a sentence, what has been given so far and what was promised for the year, in dollars. The total, the share given and every bar come from those, so edit the amounts and everything follows. The pledge's percent is PLEDGE, the matching rule is RULES, and the closing figure is PARTICIPATION.
How is progress shown without relying on the bar?
The bars are decorative; each cause has the amounts in text beside its bar ("$31,000 of $36,000"), and the total line says the same for the whole pledge with its percentage. Each bar is in foreground tones, so the block's only primary colour stays on actions, and it reads in greyscale.
How are amounts handled in a right-to-left layout?
Every sum is one left-to-right run, so a right-to-left page keeps the dollar sign and digits in order, and no figure gets split across lines. Percentages are isolated with bdi for the same reason.
How does the split behave on small screens?
The pledge and the matching rule come first and fill the width, then a rule from rail to rail, then the progress bar, the causes and the participation line. The divider and its + marks appear from lg only. Nothing scrolls sideways at 320 pixels.
Related
- Pro
A sustainability story for a carbon-accounting company: a hand-built step chart of emissions per customer falling over six years, numbered pins on the steps, and a list of what was done at each one.
- Pro
Stacked Total Impact About
NumbersA total built from its parts for a scheduling tool: a framed lead with the hours returned over a stacked bar and a legend whose numbers add up to it, and a band of three smaller impact cells.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Community channels About
Support and contactA community close for a developer community: three channels with member counts beside four recent activity lines, and a join link.
- Pro
A payroll co-op's report of seven measures over four quarters in Financial and Operational groups, a sparkline on every row, footnotes, and a quarter picker that rings one column.
- Pro
Participation Rings About
Culture and valuesAn about section for an employee-engagement company: five rituals as rings for the share of the team that joins, each with a cadence badge and one line.