Free React Nonprofit & Charity Components

Donors give more when they can see where money goes, and volunteers show up when the ask is specific. These components are built on that evidence: a donation tier grid that translates amounts into concrete outcomes, a funds allocation band that shows the split honestly, an impact stat band with sourced numbers, and a volunteer roles panel that describes real commitments instead of a vague "get involved". Transparency as a design principle, because for charities it is the conversion strategy.

4 components · MIT licensed · installable with the shadcn CLI

Donation Tier Grid

Honest donation tiers in a seamed React grid, preformatted amounts bound to concrete outcomes, nothing preselected, no guilt copy, one quiet accent. Tailwind, dark-pattern-free.

Funds Allocation Band

Where your dollar goes, a nonprofit transparency bar in React with seam-cut segments, a plain-language Tailwind ledger legend and an audited-statements footnote.

Impact Stat Band

A nonprofit impact band in React, concrete figures like 1,240 meals counting up once in tabular numerals over warm sentence labels, closed by an audited source line. Tailwind-set.

Volunteer Roles Panel

A volunteer get-involved panel in React, real roles with honest time commitments, plain requirements, a training reassurance and one direct sign-up action. Warm Tailwind, no guilt.