Brands We Service

Installation

pnpm dlx shadcn@latest add @cleverui/trade-brands-wall

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

Usage

tsx

import { TradeBrandsWall } from '@/components/blocks/trade-brands-wall'

Exampletsx

import { TradeBrandsWall } from '@/components/blocks/trade-brands-wall'

export default function TradeBrandsWallDemo() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
      <TradeBrandsWall
        heading="Brands we service"
        intro="Factory parts where it matters, honest workarounds where it doesn't."
        groups={[
          {
            label: 'Hot water',
            brands: [
              { name: 'Rheem', parts: true },
              { name: 'Rinnai', parts: true },
              { name: 'Dux' },
              { name: 'Aquamax', parts: true },
              { name: 'Bosch' },
              { name: 'Thermann' },
            ],
          },
          {
            label: 'Heating & cooling',
            brands: [
              { name: 'Daikin', parts: true },
              { name: 'Mitsubishi Electric', parts: true },
              { name: 'Fujitsu' },
              { name: 'Panasonic' },
              { name: 'Braemar' },
              { name: 'Brivis' },
            ],
          },
          {
            label: 'Kitchen & laundry',
            brands: [
              { name: 'Fisher & Paykel' },
              { name: 'Miele' },
              { name: 'Electrolux' },
              { name: 'Westinghouse' },
              { name: 'Samsung' },
              { name: 'LG' },
            ],
          },
        ]}
        partsLabel="parts on the van"
        fallback={{
          text: "Don't see yours? If it has a compliance plate, we'll look at it. Call",
          phone: '03 9877 4120',
        }}
      />
    </div>
  )
}

API reference

TradeBrandsWall accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Brands we service'`	–
`intro`	`string`	–	e.g. "Factory parts where it matters, honest workarounds where it doesn't."
`groups`*	`TradeBrandGroup[]`	–	2–4 appliance groups (Hot water, Heating & cooling, Kitchen)
`partsLabel`	`string`	`'parts on the van'`	legend text for the parts-stocked tag
`fallback`	`{ text: string; phone?: string }`	–	the outside-the-wall line with optional tel: number

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

Referenced types

Typestsx

export interface TradeBrandGroup {
  label: string
  brands: TradeBrand[]
}

export interface TradeBrand {
  name: string
  /** true when parts for this brand are carried on the van */
  parts?: boolean
}

Related components

Service Area Strip

Where-we-work as a confident strip, radius statement, suburb chips grouped by zone, and a same-day badge for the home patch. Local SEO structure built in.

Before / After Slider

Job-proof comparison, drag or arrow-key the divider between before and after panels, with honest labels and a job summary line. Built for bathroom renos, not screenshots.

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.

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.

Job Timeline

Renovation job timeline React block, week-by-week phases on a vertical spine with mono date windows and heads-up disruption notes. Tailwind, plain-spoken.

Frequently asked questions

How do I install the Brands We Service 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-brands-wall`. 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 Brands We Service require?

Brands We Service 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 Brands We Service 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