Volunteer Roles Panel

Installation

pnpm dlx shadcn@latest add @cleverui/volunteer-roles-panel

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

Usage

tsx

import { VolunteerRolesPanel } from '@/components/blocks/volunteer-roles-panel'

Exampletsx

'use client'

import { VolunteerRolesPanel } from '@/components/blocks/volunteer-roles-panel'

export default function VolunteerRolesPanelDemo() {
  return (
    <VolunteerRolesPanel
      eyebrow="Get involved"
      heading="Give an hour, or a Saturday"
      intro="Most of what we do runs on volunteers. Here is where another pair of hands matters most right now."
      roles={[
        {
          title: 'Kitchen shift',
          commitment: '3 hrs, Tuesday mornings',
          location: 'Riverside Community Hall',
          description:
            'Prep and serve lunch with our cook team. Chop, plate, wash up, whatever the day needs.',
          requirement:
            'Food Handler Certificate preferred, we cover the course if you need it.',
        },
        {
          title: 'Homework club mentor',
          commitment: '2 hrs, Thursday afternoons',
          location: 'Library annex',
          description:
            'Sit with primary-age kids on reading and maths. Patience counts more than a teaching degree.',
          requirement:
            "Working with Children Check required, we'll help you apply.",
        },
        {
          title: 'Weekend pantry pack',
          commitment: '4 hrs, first Saturday of the month',
          location: 'Warehouse, Dock Road',
          description:
            'Sort donations, pack family bags and load the van. Good shoes recommended.',
        },
        {
          title: 'Front desk greeter',
          commitment: '2 hrs, weekday mornings',
          location: 'Main office',
          description:
            'Welcome guests, answer the phone and point people to the right person. A calm first face.',
          requirement: 'Comfortable with a light lift, bags under 5 kg.',
        },
      ]}
      trainingNote="No experience needed, every role starts with training and a buddy shift."
      cta={{ label: 'Register your interest', href: '#volunteer-register' }}
    />
  )
}

API reference

VolunteerRolesPanel accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Get involved'`	quiet sans micro-label, warm, never a colored pill
`heading`	`string`	`'Give an hour, or a Saturday'`	–
`intro`	`string`	–	one warm sentence
`roles`*	`VolunteerRole[]`	–	3–5 roles
`trainingNote`	`string`	`'No experience needed, every role starts with training and a buddy shift.'`	training-and-buddy reassurance
`cta`*	`{ label: string; href: string }`	–	the single direct action

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

Referenced types

Typestsx

export interface VolunteerRole {
  title: string
  /** PREFORMATTED, e.g. '3 hrs, Tuesday mornings' */
  commitment: string
  location?: string
  description: string
  /** honest requirement line with help offered */
  requirement?: 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.

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.

Appraisal CTA Panel

The what's-your-place-worth conversion block, a single address field with a callback-only submit, a recent-sales proof line in tabular figures, and an agent trust row.

Booking Ritual CTA

An appointment CTA framed as the start of a ritual, a light serif invitation, a softened primary action, and a quiet phone path beside it. Unhurried, sensory, certain of itself.

Shine Button

Button whose filled variants carry a single sheen sweep on hover, light passing over a surface. Four variants, three sizes, press feedback, full keyboard focus treatment.

Frequently asked questions

How do I install the Volunteer Roles Panel component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/volunteer-roles-panel`. 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 Volunteer Roles Panel require?

Volunteer Roles Panel 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 Volunteer Roles Panel 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