Skip to main content
Clever Ops

Nonprofit Charity Site Template

An honest annual report page for a food-rescue charity: mission, audited impact numbers, an interactive dollar split, volunteer role filter and an unguilted donate flow.

Preview & code

Loading Nonprofit Charity Site Template preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/template-nonprofit

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TemplateNonprofit } from '@/components/blocks/template-nonprofit'
Exampletsx
'use client'

import { TemplateNonprofit } from '@/components/blocks/template-nonprofit'

export default function TemplateNonprofitDemo() {
  return <TemplateNonprofit />
}

API reference

TemplateNonprofit accepts the following props.

PropTypeDefaultDescription
contentCommonTableContentdefaultContentoverride any slice of the page, defaults to the Common Table fixture above
classNamestring––

Referenced types

Typestsx
export interface CommonTableContent {
  org: {
    name: string
    place: string
    abn: string
    email: string
    phone: string
    phoneHref: string
    address: string
  }
  nav: { links: CommonTableLink[]; donate: CommonTableLink }
  hero: {
    eyebrow: string
    title: string
    lede: string
    /** the one concrete number, set large */
    bigNumber: string
    bigNumberLabel: string
    primaryCta: CommonTableLink
    secondaryCta: CommonTableLink
    note: string
    photoCaption: string
    runnerCaption: string
  }
  /** the paperwork strip, ACNC and audit up front */
  credentials: { statement: string; items: string[] }
  mission: {
    eyebrow: string
    title: string
    lede: string
    who: string
    where: string
    stepsLabel: string
    steps: { name: string; body: string; fact: string }[]
    story: {
      kicker: string
      photoCaption: string
      body: string
      quote: string
      attribution: string
      permission: string
    }
  }
  numbers: {
    eyebrow: string
    title: string
    lede: string
    items: { value: string; label: string; detail: string }[]
    footnote: string
  }
  money: {
    eyebrow: string
    title: string
    lede: string
    barLabel: string
    segments: CommonTableSegment[]
    footnote: string
  }
  work: {
    eyebrow: string
    title: string
    lede: string
    items: CommonTableProgram[]
  }
  quote: { text: string; attribution: string }
  volunteers: {
    eyebrow: string
    title: string
    lede: string
    filters: { id: string; label: string }[]
    roles: CommonTableRole[]
    inductionLabel: string
    trainingNote: string
    cta: CommonTableLink
  }
  partners: {
    lead: string
    names: string[]
    note: string
    cta: CommonTableLink
  }
  give: {
    eyebrow: string
    title: string
    lede: string
    bullets: string[]
    phoneLine: { label: string; value: string; href: string; note: string }
    cadence: { once: string; monthly: string }
    amounts: CommonTableAmount[]
    prompt: string
    customLabel: string
    customPlaceholder: string
    customPending: string
    buttonPrefix: string
    buttonIdle: string
    confirmationTitle: string
    confirmation: string
    resetLabel: string
    dgrNote: string
  }
  acknowledgement: string
  footer: {
    blurb: string
    columns: { label: string; links: CommonTableLink[] }[]
    dgrLine: string
    legal: string[]
  }
  /** fixed donate bar on small screens */
  actionBar: { donateLabel: string }
}

export interface CommonTableLink {
  label: string
  href: string
}

export interface CommonTableSegment {
  /** e.g. "The work: rescue, kitchen and tables" */
  name: string
  /** preformatted cents, e.g. "84¢" */
  cents: string
  /** percentage of every dollar, drives the bar width */
  share: number
  /** audited dollar total, e.g. "$5.1M in FY26" */
  total: string
  /** what the segment actually buys, one plain sentence */
  buys: string
}

export interface CommonTableProgram {
  name: string
  meta: string
  body: string
  /** big numeral, e.g. "2,400" */
  figure: string
  figureLabel: string
  /** honest caption for the photography placeholder */
  photoCaption: string
}

export interface CommonTableRole {
  title: string
  /** filter buckets this role belongs to */
  categories: string[]
  /** e.g. "3 hrs, Tue to Thu" */
  commitment: string
  location: string
  description: string
  /** the next induction session, stated plainly */
  induction: string
}

export interface CommonTableAmount {
  /** e.g. "45" or "custom" */
  id: string
  /** chip label, e.g. "$45" or "Custom" */
  label: string
  /** the concrete impact line for a one-off gift */
  once: string
  /** the concrete impact line for a monthly gift */
  monthly: string
}

Frequently asked questions

How do I install the Nonprofit Charity Site Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-nonprofit`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Nonprofit Charity Site Template require?

Nonprofit Charity Site Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Nonprofit Charity Site Template to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services