Donations and support

For associations, foundations and causes. Amounts with their impact, a campaign goal that fills, tiers to pick and bank details to copy.

4 variants

Switch category

Amount picker

Once or monthly with a gliding switch, preset amounts or your own. The line below tells what the chosen amount does, the button says the amount.

Open in Studio

Installv1.0.1

aiw add @ai-website/donation

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<Donation variant="amount-picker" title="…" amounts={{ once: [25, 50, 100], monthly: [10, 20, 35] }} impact={[{ amount, text }]} action="/donate" />

Source

Campaign goal

The amount counts up, the bar fills when it comes into view. Recent gifts with a short note rise in next to it.

Open in Studio

Installv1.0.1

aiw add @ai-website/donation

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<Donation variant="campaign" title="…" goal={{ raised, target, donors, daysLeft }} supporters={[{ name, amount, when, note }]} />

Source

Impact tiers

Each amount as a card with what it does. Pick one, the button takes over the amount. Light follows the pointer.

Open in Studio

Installv1.0.1

aiw add @ai-website/donation

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<Donation variant="impact-tiers" title="…" tiers={[{ amount, title, text, icon, popular }]} />

Source

Other ways to help

Bank details with a copy button per field, then volunteering, company partnerships and gifts in kind.

Open in Studio

Installv1.0.1

aiw add @ai-website/donation

Brings along utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

<Donation variant="other-ways" title="…" bank={{ holder, iban, bic, reference }} ways={[{ icon, title, text, action, href }]} />

Source

Details

What Donations and support brings along, read from the registry and the source.

Area: Marketing
Variants: 4
Version: 1.0.1 · since 1.0.0
File: components/ui/donation.tsx
Brings along: utilskitbutton icon number-tickerrevealmotionsection
npm packages: None
Languages: English and German, 26 texts of its own
Studio: All 4 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The DonationProps interface from components/ui/donation.tsx, with the comments from the code.

variantoptional
DonationVariant
amount-pickercampaignimpact-tiersother-ways
eyebrowoptional
React.ReactNode
titlerequired
React.ReactNode
descriptionoptional
React.ReactNode
currencyoptional
string
ISO currency code, default EUR
amountsoptional
{ once: number[]; monthly: number[] }
amount-picker: preset amounts per frequency
frequencyoptional
DonationFrequency
oncemonthly
Start frequency, default monthly
impactoptional
{ amount: number; text: string }[]
What an amount does, the highest one below the chosen amount is shown
goaloptional
{ raised: number; target: number; donors: number; daysLeft?: number }
campaign: the goal
supportersoptional
{ name: string; amount: number; when: string; note?: string }[]
campaign: recent gifts
tiersoptional
{ amount: number; title: string; text: string; icon?: IconName; popular?: boolean }[]
impact-tiers: the cards
bankoptional
{ holder: string; iban: string; bic?: string; bank?: string; reference?: string }
other-ways: bank details
waysoptional
{ icon: IconName; title: string; text: string; action: string; href: string }[]
other-ways: more ways to help
trustoptional
string[]
Short trust points, e.g. tax-deductible, secure payment
mediaoptional
React.ReactNode
amount-picker: a picture
actionoptional
string
Where the form posts
onDonateoptional
(amount: number, frequency: DonationFrequency) => void

Built-in texts

Donations and support writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 26 texts

Key	English	German
once	English Once	German Einmalig
monthly	English Monthly	German Monatlich
frequency	English How often	German Wie oft
amount	English Amount	German Betrag
other	English Other amount	German Anderer Betrag
perMonth	English {a} a month	German {a} im Monat
donate	English Donate {a}	German {a} spenden
donateNow	English Donate now	German Jetzt spenden
donateMonthly	English Give {a} a month	German {a} monatlich spenden
minimum	English Please enter at least {a}.	German Bitte gib mindestens {a} ein.
raised	English raised of {a}	German von {a} gesammelt
donors	English donors	German Spenderinnen und Spender
daysLeft	English days left	German Tage noch
recent	English Recent gifts	German Neueste Spenden
popular	English Most chosen	German Am häufigsten gewählt
bankTitle	English Bank transfer	German Überweisung
holder	English Account holder	German Kontoinhaber
iban	English IBAN	German IBAN
bic	English BIC	German BIC
bank	English Bank	German Bank
reference	English Reference	German Verwendungszweck
copy	English Copy {f}	German {f} kopieren
copied	English {f} copied	German {f} kopiert
percent	English {n}%	German {n} %
reached	English reached	German erreicht
pct	English %	German  %

Read from the source of the component.

Sets aria-checked, aria-describedby, aria-invalid, aria-label, aria-live, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles alert, progressbar, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.

Frequent questions

How do I install Donations and support?

With aiw add @ai-website/donation. The command puts components/ui/donation.tsx into your project, the code is yours from then on. It brings along button, icon, number-ticker, reveal, motion and section. It needs no further npm packages.

Which variants does Donations and support have?

4 variants, Amount picker, Campaign goal, Impact tiers and Other ways to help. You pick one with the variant prop, for example variant="campaign".

Can I translate the texts of Donations and support?

Yes. Donations and support carries 26 texts of its own in English and German, such as “Once”, “Monthly” and “How often”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Donations and support?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Donations and support with aiw_components and install it with aiw_add @ai-website/donation. Name the variant in your prompt, for example variant="amount-picker", and the assistant writes your content straight into the props.

Can I adjust Donations and support without code?

Yes, in the Studio. All 4 variants are editable there, texts, lists and switches. The Studio writes the matching Donation code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Donations and support on a page.