Nonprofit website sections

For charities, aid organisations and clubs. Impact numbers that build up while scrolling, the annual report, where every gift goes, projects on a drawn map and volunteering with a short sign-up.

5 variants

Switch category

Show what every gift does

Donors give to organisations they trust, and trust grows with openness. These sections show impact in numbers, the annual report, the use of every euro and the projects on a map, and they end with a way to help that goes beyond money. For the donation form itself the kit has its own category for donations.

Impact counts numbers up as they scroll into view and fills bars toward the goal of the year, with the year as milestones below. Annual report switches years on tabs, income and spending grow as bars, the sources split one bar and the report downloads in one click. Where your gift goes splits a chosen amount on a ring along how every euro is used, each share says what its part buys. Projects on a map places every project as a pin on a dotted world map with funding bars. Volunteering matches time and interests to roles and checks the sign up.

Name concrete results next to the numbers, a well with the name of its village stays with people longer than a total. Put where your gift goes right before the donation form, it answers the question donors ask themselves at that moment. Keep volunteering visible for everyone who would rather give time.

ImpactNew in 1.2

Numbers count up one after another as they scroll into view, bars fill toward the goal of the year. Below, the year as milestones on a line that fills while scrolling.

Installv1.0.0

aiw add @ai-website/nonprofit

Brings along utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="impact" stats={[{ id, value, label, text, icon, goal }]} milestones={[{ date, title, text }]} />

Source

Annual reportNew in 1.2

Years as tabs with a sliding line. Income and spending glide to their values and grow as bars, the sources split one bar, the highlights follow. The drawn report lifts when you point at it and downloads in one click.

Installv1.0.0

aiw add @ai-website/nonprofit

Brings along utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="annual-report" years={[{ year, income, spent, sources: [{ label, amount }], highlights, href, file }]} />

Source

Where your gift goesNew in 1.2

Pick an amount and a ring splits it along how every pound is used. The ring draws itself while scrolling, pointing at a share lifts it, each share says what its part buys.

Installv1.0.0

aiw add @ai-website/nonprofit

Brings along utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="funds" amounts={[30, 60, 120]} shares={[{ id, label, share: 82, text, icon, unit: { cost, label } }]} />

Source

Projects on a mapNew in 1.2

A dotted world map fades in from west to east, every project is a pin. Pick a region or point at a card, its pin pulses and shows the place. Funding bars fill while scrolling.

Installv1.0.0

aiw add @ai-website/nonprofit

Brings along utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="projects" projects={[{ id, title, region, place, lat, lon, raised, goal, donors, text, icon }]} />

Source

VolunteeringNew in 1.2

Pick your time and what matters to you, the matching roles rise in. Choose one and it moves into the sign-up, which checks name and email and thanks you by name.

Installv1.0.0

aiw add @ai-website/nonprofit

Brings along utils, kit, button, icon, input, section, motion

Usage

<Nonprofit variant="volunteer" times={[{ id, label, hint }]} interests={[{ id, label, icon }]} roles={[{ id, title, text, time, interests, hours, place, icon }]} />

Source

Details

What Nonprofit brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.0 · since 1.2.0
File: components/ui/nonprofit.tsx
Brings along: utilskitbutton icon inputsectionmotion
npm packages: None
Languages: English and German, 41 texts of its own
Studio: Adjust in code
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The NonprofitProps interface from components/ui/nonprofit.tsx, with the comments from the code.

variantoptional
NonprofitVariant
impactannual-reportfundsprojectsvolunteer
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
statsoptional
NonprofitStat[]
impact
milestonesoptional
NonprofitMilestone[]
yearsoptional
NonprofitYear[]
annual-report
sharesoptional
NonprofitShare[]
funds: how every euro is used
amountsoptional
number[]
auditoptional
string
funds: a line on audits or seals, replaces the default
projectsoptional
NonprofitProject[]
projects
rolesoptional
NonprofitRole[]
volunteer
timesoptional
{ id: string; label: string; hint?: string }[]
interestsoptional
{ id: string; label: string; icon?: IconName }[]
onSignUpoptional
(data: { role: string; name: string; email: string; phone: string }) => void
volunteer: called with the sign up, the success message shows either way
linksoptional
{ donate?: string; project?: string }
currencyoptional
string

Built-in texts

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

Show all 41 texts

Key	English	German
goal	English Goal {n}	German Ziel {n}
goalReached	English Goal reached	German Ziel erreicht
year	English Year	German Jahr
report	English Annual report {year}	German Jahresbericht {year}
download	English Download the {year} report	German Bericht {year} herunterladen
income	English Income	German Einnahmen
spent	English Spent on our work	German In unsere Arbeit geflossen
sources	English Where the money comes from	German Woher das Geld kommt
highlights	English What the year brought	German Was das Jahr gebracht hat
ratio	English {n} of the income went straight into the work	German {n} der Einnahmen flossen direkt in die Arbeit
amount	English Your gift	German Deine Spende
yourGift	English Of your {amount}	German Von deinen {amount}
goesTo	English This is where it goes	German Hierhin fließt sie
buys	English about {n} {label}	German etwa {n} {label}
donate	English Give {amount}	German {amount} spenden
audit	English Checked every year by independent auditors	German Jedes Jahr von unabhängigen Prüfern kontrolliert
region	English Region	German Region
all	English All regions	German Alle Regionen
raised	English {raised} of {goal}	German {raised} von {goal}
donors	English {n} donors	German {n} Spender
funded	English {n} funded	German {n} finanziert
support	English Support {name}	German {name} unterstützen
supportShort	English Support this project	German Projekt unterstützen
onMap	English Show {name} on the map	German {name} auf der Karte zeigen
time	English How much time do you have?	German Wie viel Zeit hast du?
interests	English What matters to you?	German Was liegt dir am Herzen?
matches	English {n} roles fit	German {n} Aufgaben passen
noMatch	English Pick fewer interests to see more roles	German Wähle weniger Interessen, dann siehst du mehr Aufgaben
choose	English Choose	German Auswählen
chosen	English Chosen	German Ausgewählt
yourRole	English Your role	German Deine Aufgabe
pickRole	English Choose a role from the list, we will tell you everything about it here.	German Wähle eine Aufgabe aus der Liste, hier erfährst du alles darüber.
name	English Your name	German Dein Name
email	English Email	German E-Mail
phone	English Phone	German Telefon
nameError	English Please enter your name	German Bitte gib deinen Namen ein
emailError	English Please enter a valid email address	German Bitte gib eine gültige E-Mail-Adresse ein
roleError	English Please pick a role first	German Bitte wähle zuerst eine Aufgabe
signUp	English Sign up for this role	German Für diese Aufgabe anmelden
thanks	English Thank you, {name}. We will call you within two days and plan your first day together.	German Danke, {name}. Wir rufen dich innerhalb von zwei Tagen an und planen deinen ersten Tag gemeinsam.
again	English Choose another role	German Andere Aufgabe wählen

Read from the source of the component.

Nonprofit handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-describedby, aria-invalid, aria-label, aria-live, aria-pressed, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
Uses the roles progressbar, radio, radiogroup and status.
Announces changes through a live region without moving focus.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Nonprofit?

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

Which variants does Nonprofit have?

5 variants, Impact, Annual report, Where your gift goes, Projects on a map and Volunteering. You pick one with the variant prop, for example variant="annual-report".

Can I translate the texts of Nonprofit?

Yes. Nonprofit carries 41 texts of its own in English and German, such as “Goal reached”, “Year” and “Income”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Nonprofit?

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

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Nonprofit on a page.

Show what every gift does

Nonprofit

ImpactNew in 1.2

Annual reportNew in 1.2

Where your gift goesNew in 1.2

Projects on a mapNew in 1.2

VolunteeringNew in 1.2

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with