Service Area Strip

Installation

pnpm dlx shadcn@latest add @cleverui/trade-service-area

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

Usage

tsx

import { TradeServiceArea } from '@/components/blocks/trade-service-area'

Exampletsx

import { TradeServiceArea } from '@/components/blocks/trade-service-area'

export default function TradeServiceAreaDemo() {
  return (
    <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
      <TradeServiceArea
        heading="Where we work"
        statement="Everything inside 25km of Brunswick, usually same day."
        zones={[
          {
            label: 'Home patch',
            sameDay: true,
            suburbs: [
              'Brunswick',
              'Brunswick East',
              'Coburg',
              'Thornbury',
              'Northcote',
              'Preston',
            ],
          },
          {
            label: 'Inner north',
            sameDay: true,
            suburbs: [
              'Fitzroy',
              'Carlton',
              'Parkville',
              'Reservoir',
              'Pascoe Vale',
              'Essendon',
            ],
          },
          {
            label: 'Extended',
            suburbs: [
              'Heidelberg',
              'Ivanhoe',
              'Kew',
              'Footscray',
              'Moonee Ponds',
              'Airport West',
            ],
          },
        ]}
        note="Outside 25km? Call anyway, we take jobs out to Sunbury and Whittlesea when the diary allows, usually next day."
      />
    </div>
  )
}

API reference

TradeServiceArea accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Where we work'`	–
`statement`*	`string`	–	e.g. "Everything inside 25km of Brunswick, usually same day."
`zones`*	`TradeServiceZone[]`	–	grouped coverage; sameDay zones get the badge
`note`	`string`	–	outside-area line

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

Referenced types

Typestsx

export interface TradeServiceZone {
  label: string
  sameDay?: boolean
  suburbs: string[]
}

Related components

Brands We Service

A brands-we-service wall for React, text-only brand chips grouped by appliance, parts-stocked tags, and a call fallback. Tailwind tokens, zero logo assets.

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 Service Area Strip 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-service-area`. 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 Service Area Strip require?

Service Area Strip uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Service Area Strip 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