Who Shows Up

Installation

pnpm dlx shadcn@latest add @cleverui/trade-team-vans

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

Usage

tsx

import { TradeTeamVans } from '@/components/blocks/trade-team-vans'

Exampletsx

import { TradeTeamVans } from '@/components/blocks/trade-team-vans'

export default function TradeTeamVansDemo() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
      <TradeTeamVans
        heading="Who shows up"
        intro="No subcontractors, no strangers, one of these four, every time."
        crew={[
          {
            name: 'Mick',
            role: 'Lead plumber',
            years: 18,
            van: 'VAN 01 · 1GD 3XR',
            lead: true,
          },
          {
            name: 'Dave',
            role: 'Gas fitter',
            years: 14,
            van: 'VAN 04 · 1BK 882',
          },
          {
            name: 'Priya',
            role: 'Apprentice plumber',
            years: 3,
            van: 'VAN 02 · 1HN 441',
          },
          {
            name: 'Tom',
            role: 'Drainage specialist',
            years: 11,
            van: 'VAN 07 · 1WP 119',
          },
        ]}
        note="Every tech is police-checked and carries photo ID. Ask to see it at the door."
      />
    </div>
  )
}

API reference

TradeTeamVans accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Who shows up'`	–
`intro`	`string`	–	one plain sentence under the heading
`crew`*	`TradeCrewMember[]`	–	3–5 crew members
`note`	`string`	–	closing trust line

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

Referenced types

Typestsx

export interface TradeCrewMember {
  name: string
  role: string
  years: number
  /** vehicle ID like "VAN 04 · 1GD 3XR" */
  van?: string
  /** at most one lead, gets primary keyline + point-of-contact line */
  lead?: boolean
}

Related components

Workmanship Guarantee

The guarantee set large and plain, one promise sentence in display type, terms in honest small print at a readable size, and the license and insurer line in mono. A handshake, not a legal wall.

How a Job Runs

The job pipeline set plain, quote, schedule, work, walkthrough, with big numerals, a one-line promise per step, and response-time chips. No jargon, no mystery, no surprises on the invoice.

Credentials Bar

The trust strip that closes trade jobs, license number, insurance, years on the tools, and review score in one sturdy row. Mono where it's data, bold where it's pride.

Emergency Bar

A 24/7 emergency strip, a lamp that pulses once, the phone number set huge for wet thumbs, and an average-callout stat that counts up. Urgency without panic, dependable at 2am.

Payment Plans

Payment plan explainer React block for trades, weekly amounts in mono, a worked job example ledger, and honest fine print. Tailwind tokens, no BNPL branding.

Quote Banner

A get-a-quote block built the way tradies win work, phone number first and huge, a response-time promise, and a three-line job form. No friction, no fluff.

Frequently asked questions

How do I install the Who Shows Up component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/trade-team-vans`. 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 Who Shows Up require?

Who Shows Up 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 Who Shows Up 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