Tideline: Nonprofit template
A nonprofit site that raises money.
For charities and nonprofits: a film hero, impact-per-amount donations, counters, the founders' story, press, a newsletter archive and a big footer.
About the Tideline template
Tideline is a nonprofit site that raises money. A film hero, donations with impact per amount, counters, the founders' story, press and a monthly report newsletter.
A nonprofit site that raises money. It is a complete nonprofit landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.
Who Tideline is for
- Environmental charities.
- Volunteer organisations.
- Community nonprofits.
- Advocacy groups.
What is inside
8 sections, top to bottom:
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Film: Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Pricing Donation: Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.
- Stats Counters: Four big numbers that roll into place when they enter view.
- Team Founders: Founders' story with an editorial serif headline, who started it and a timeline of milestones.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.
How it is built
The footer carries your charity number and next event. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.
Install Tideline
npx shadcn@latest add @charcoal/tidelineTemplates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.
Frequently asked questions
- Can I use Tideline for a client site?
- Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
- Is Tideline a Next.js template?
- It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.
Sections in this template
- Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
- Hero Film: Cinematic hero with slow Ken Burns stills, film grain, a play control and chapter markers.
- Pricing Donation: Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.
- Stats Counters: Four big numbers that roll into place when they enter view.
- Team Founders: Founders' story with an editorial serif headline, who started it and a timeline of milestones.
- Press Quotes: As-seen-in strip where outlet wordmarks act as tabs for a large rotating serif quote.
- Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
- Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.