Nonprofit
A page for an association or charity (Havsbandet, a coastal clean-up group): the cause and one donate button first, the mission, impact in numbers, one clean-up told as a story, where donations go, upcoming events, the people and a gift card. Deep teal and sand, a serif face.
npx shadcn add @klarhimmel/template-nonprofit
Install
npx shadcn add @klarhimmel/template-nonprofitThe page
12 sections, in order
Each section is one block with this template's own copy. The anchor is the id in-page links point at.
| Anchor | Block | Content |
|---|---|---|
(none) | banner/announcement | Beach clean-up at Askim, Saturday 18 October, 10:00. Gloves provided. |
#top | header/menu | Havsbandet |
#hero | hero/split | Clean coasts, one Saturday at a time |
#mission | content/columns | Because the sea gives back what we throw in |
#impact | stats/split | Eleven years of Saturdays |
#story | case-study/story | Forty people, three hours, a beach you can walk barefoot on |
#funds | stats/bars | Your krona, in four parts |
#events | blog/list | Come along |
#people | team/departments | Run by members, helped by two employees |
#volunteer | newsletter/split | Hear about the next clean-up first |
#donate | cta/card | 200 kronor buys gloves and bags for ten volunteers |
(none) | footer/link-columns | Havsbandet |
Install
CLI
npx shadcn add @klarhimmel/template-nonprofitpnpm
pnpm dlx shadcn@latest add @klarhimmel/template-nonprofit- Klarhimmel
- Geist / Geist
- radius 8
- Needs
- React 19, Tailwind CSS v4 and the theme import. The page and every block it uses land under components/klarhimmel/.
Before you ship
Wire these before shipping
The template is a finished page with placeholder wiring. These are yours to connect.
Links
`#section` links jump within the page. Links to https://example.com are placeholders: point them at your own pages.
Images
The illustrations ship with the template (public/klarhimmel/art/nonprofit/). They are artwork, not photographs: replace the `media.src` values with your own photos.
Forms
Set `action` on the volunteer sign-up and the footer newsletter (it is `/replace-with-your-endpoint` now). With `method: 'post'` the form submits natively, with no JavaScript. The live demo never submits.
Style
Uses the default Klarhimmel palette, Geist fonts, radius and spacing. Import theme.css after Tailwind.