Funds Allocation Band

Installation

pnpm dlx shadcn@latest add @cleverui/funds-allocation-band

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

Usage

tsx

import { FundsAllocationBand } from '@/components/blocks/funds-allocation-band'

Exampletsx

'use client'

import { FundsAllocationBand } from '@/components/blocks/funds-allocation-band'

export default function FundsAllocationBandDemo() {
  return (
    <FundsAllocationBand
      eyebrow="Accountability"
      heading="Where your dollar goes"
      intro="Split exactly as our audited accounts report it, no figures polished to flatter."
      segments={[
        {
          label: 'Programs',
          value: '84¢ · $4.1M',
          share: 84,
          description: 'Food, housing and outreach, delivered directly to people we serve.',
        },
        {
          label: 'Fundraising',
          value: '9¢ · $440K',
          share: 9,
          description: 'Donor care, events and the systems that keep gifts coming in.',
        },
        {
          label: 'Administration',
          value: '7¢ · $340K',
          share: 7,
          description: 'Finance, audit, compliance and the team that keeps the lights on.',
        },
      ]}
      footnote="From our FY25 audited financial statements. The full annual report is free to download."
    />
  )
}

API reference

FundsAllocationBand accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Accountability'`	quiet sans micro-label, warm, never a colored pill
`heading`	`string`	`'Where your dollar goes'`	–
`intro`	`string`	–	one honest sentence
`segments`*	`FundsAllocationSegment[]`	–	2–4 parts in descending order
`footnote`	`string`	`'From our FY25 audited financial statements. The full annual report is free to download.'`	audited-statements provenance
`headingLevel`	`number`	`2`	heading element level

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

Referenced types

Typestsx

export interface FundsAllocationSegment {
  label: string
  /** PREFORMATTED, e.g. '84¢ · $4.1M' */
  value: string
  /** percent width; normalized if sum ≠ 100 */
  share: number
  /** plain-language line */
  description?: string
}

Related components

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.

Donation Tier Grid

Honest donation tiers in a seamed React grid, preformatted amounts bound to concrete outcomes, nothing preselected, no guilt copy, one quiet accent. Tailwind, dark-pattern-free.

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.

Commission Breakdown Sheet

Agent fees in full view, commission rate as the hero figure, itemised campaign costs in a ruled Tailwind ledger, and a payable-at-settlement note. React transparency block.

Fee Structure Sheet

A law firm fee disclosure sheet, fixed, hourly and no-win-no-fee columns with plain-English terms and honest figures. React and Tailwind, zero pricing-card urgency.

Fees & Rebates

An honest fee transparency table, consult fee, Medicare rebate, and the out-of-pocket gap in true table semantics with tabular figures. React and Tailwind disclosure for clinics.

Frequently asked questions

How do I install the Funds Allocation Band component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/funds-allocation-band`. 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 Funds Allocation Band require?

Funds Allocation Band 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 Funds Allocation Band 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