Spenden und Unterstützen

Für Vereine, Stiftungen und Initiativen. Beträge mit ihrer Wirkung, ein Kampagnenziel, das sich füllt, Stufen zum Wählen und Bankdaten zum Kopieren.

4 Variants

Kategorie wechseln

Betrag wählen

Einmalig oder monatlich mit gleitendem Schalter, feste Beträge oder ein eigener. Die Zeile darunter sagt, was der Betrag bewirkt, der Knopf nennt ihn.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/donation

Bringt mit 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

Kampagnenziel

Der Betrag zählt hoch, der Balken füllt sich beim Hereinscrollen. Daneben steigen die neuesten Spenden mit kurzer Notiz auf.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/donation

Bringt mit 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

Wirkung je Betrag

Jeder Betrag als Karte mit seiner Wirkung. Eine wählen, der Knopf übernimmt den Betrag. Licht folgt dem Zeiger.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/donation

Bringt mit utils, kit, button, icon, number-ticker, reveal, motion, section

Usage

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

Source

Andere Wege zu helfen

Bankdaten mit einem Kopierknopf je Feld, dazu Ehrenamt, Firmenpartnerschaften und Sachspenden.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/donation

Bringt mit 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

Was Spenden und Unterstützen mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 4
Version: 1.0.1 · seit 1.0.0
Datei: components/ui/donation.tsx
Bringt mit: utilskitbutton icon number-tickerrevealmotionsection
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 26 eigene Texte
Studio: Alle 4 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle DonationProps aus components/ui/donation.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
DonationVariant
amount-pickercampaignimpact-tiersother-ways
eyebrowoptional
React.ReactNode
titlePflicht
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

Eingebaute Texte

Diese Texte schreibt Spenden und Unterstützen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 26 Texte anzeigen

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

Aus dem Quellcode der Component abgeleitet.

Setzt aria-checked, aria-describedby, aria-invalid, aria-label, aria-live, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert, progressbar, radio, radiogroup und status.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Spenden und Unterstützen?

Mit aiw add @ai-website/donation. Der Befehl legt die Datei components/ui/donation.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, number-ticker, reveal, motion und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Spenden und Unterstützen?

4 Varianten, Betrag wählen, Kampagnenziel, Wirkung je Betrag und Andere Wege zu helfen. Du wählst sie mit der Prop variant, zum Beispiel variant="campaign".

Kann ich die Texte von Spenden und Unterstützen übersetzen?

Ja. Spenden und Unterstützen bringt 26 eigene Texte auf Deutsch und Englisch mit, etwa „Einmalig“, „Monatlich“ und „Wie oft“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Spenden und Unterstützen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Spenden und Unterstützen mit aiw_components und installieren sie mit aiw_add @ai-website/donation. Nenn im Prompt die Variante, etwa variant="amount-picker", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Spenden und Unterstützen ohne Code anpassen?

Ja, im Studio. Alle 4 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Donation-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Spenden und Unterstützen stehen.