Donation Tier Grid

Installation

pnpm dlx shadcn@latest add @cleverui/donation-tier-grid

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

Usage

tsx

import { DonationTierGrid } from '@/components/blocks/donation-tier-grid'

Exampletsx

'use client'

import { DonationTierGrid } from '@/components/blocks/donation-tier-grid'

export default function DonationTierGridDemo() {
  return (
    <DonationTierGrid
      eyebrow="Give"
      heading="What your gift does"
      intro="Choose an amount and we put it to work the same week. No amount is too small."
      tiers={[
        {
          amount: '$25',
          cadence: 'one-time',
          impact: 'Packs a school bag with a term of supplies',
          detail:
            'Notebooks, pencils, a warm jumper and a lunchbox, handed to a child starting the term ready.',
          cta: { label: 'Give $25', href: '#give-25' },
        },
        {
          amount: '$60',
          cadence: 'per month',
          impact: 'Keeps a family pantry stocked for a week',
          detail:
            'Fresh produce, staples and household essentials delivered to a household we already know.',
          cta: { label: 'Give monthly', href: '#give-60-monthly' },
          emphasized: true,
        },
        {
          amount: '$250',
          cadence: 'one-time',
          impact: 'Funds a weekend of emergency housing',
          detail:
            'Two safe nights, meals and a caseworker who stays with the household through Monday.',
          cta: { label: 'Give $250', href: '#give-250' },
        },
      ]}
      emphasisLabel="Most chosen"
      note="Gifts over $2 are tax-deductible and your receipt arrives by email straight away. Prefer another amount? Give whatever feels right."
    />
  )
}

API reference

DonationTierGrid accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Give'`	quiet sans micro-label, warm, never a colored pill
`heading`	`string`	`'What your gift does'`	–
`intro`	`string`	–	one direct unguilted sentence
`tiers`*	`DonationTier[]`	–	2–4 tiers
`emphasisLabel`	`string`	`'Most chosen'`	real-text label on the emphasized tier
`note`	`string`	`'Gifts over $2 are tax-deductible and your receipt arrives by email straight away. Prefer another amount? Give whatever feels right.'`	receipt promise and open any-amount invitation

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface DonationTier {
  /** PREFORMATTED, e.g. '$25' */
  amount: string
  /** e.g. 'one-time' or 'per month' */
  cadence?: string
  /** one concrete outcome */
  impact: string
  detail?: string
  cta: { label: string; href: string }
  /** at most one tier should be emphasized */
  emphasized?: boolean
}

Related components

Funds Allocation Band

Where your dollar goes, a nonprofit transparency bar in React with seam-cut segments, a plain-language Tailwind ledger legend and an audited-statements footnote.

Impact Stat Band

A nonprofit impact band in React, concrete figures like 1,240 meals counting up once in tabular numerals over warm sentence labels, closed by an audited source line. Tailwind-set.

Volunteer Roles Panel

A volunteer get-involved panel in React, real roles with honest time commitments, plain requirements, a training reassurance and one direct sign-up action. Warm Tailwind, no guilt.

Event Ticket Tiers

GA and VIP tickets as perforated stub cards, mono serials, tabular prices, and an honest sold-out state. Box-office paper, not SaaS pricing chrome.

Membership Glow

Beauty memberships with serif tier names like The Monthly Ritual, included treatments as airy lists, per-month prices in tabular figures, and a soft masked halo behind the signature tier.

Membership Tiers

Gym pricing in the coach's voice, bold uppercase tier names like FOUNDATION and SURGE, per-week prices in big tabular figures, commitment notes, and a ruled ledger with zero glow.

Frequently asked questions

How do I install the Donation Tier Grid component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/donation-tier-grid`. 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 Donation Tier Grid require?

Donation Tier Grid 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 Donation Tier Grid 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.

Preview & code