Skip to main content
Clever Ops

Practice Areas Grid

Practice areas as formal hairline tiles, serif area names, one-sentence plain-English scope lines, and matter counts in quiet tabular figures. Measured, precise, badge-free.

Preview & code

Loading Practice Areas Grid preview

Installation

pnpm dlx shadcn@latest add @cleverui/practice-areas-grid

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

Usage

tsx
import { PracticeAreasGrid } from '@/components/blocks/practice-areas-grid'
Exampletsx
'use client'

import { PracticeAreasGrid } from '@/components/blocks/practice-areas-grid'

export default function PracticeAreasGridDemo() {
  return (
    <PracticeAreasGrid
      eyebrow="Areas of practice"
      heading="Practice areas"
      intro="Forty years acting for individuals and institutions across the state."
      areas={[
        {
          name: 'Commercial litigation',
          scope:
            'Contract disputes, shareholder conflicts, and claims against professionals, from early strategy through trial and appeal.',
          matters: '412 matters since 2009',
          href: '#commercial-litigation',
        },
        {
          name: 'Corporate & M&A',
          scope:
            'Private company sales, private equity investments, and restructures where the documents must hold under pressure.',
          matters: '186 closings since 2011',
          href: '#corporate',
        },
        {
          name: 'Employment & workplace',
          scope:
            'Executive exits, restraint disputes, and workplace investigations handled with care for reputation and continuity.',
          matters: '290 matters since 2014',
          href: '#employment',
        },
        {
          name: 'Estates & trusts',
          scope:
            'Will contests, trustee disputes, and succession planning for families with complex assets or blended interests.',
          matters: '154 matters since 2008',
          href: '#estates',
        },
        {
          name: 'Property & construction',
          scope:
            'Development agreements, building disputes, and lease conflicts where the commercial outcome matters more than the fight.',
          matters: '221 matters since 2010',
          href: '#property',
        },
        {
          name: 'Regulatory & inquiries',
          scope:
            'Responses to regulators, royal commissions, and public inquiries, measured, documented, and quietly thorough.',
          matters: '67 appearances since 2015',
          href: '#regulatory',
        },
      ]}
    />
  )
}

API reference

PracticeAreasGrid accepts the following props.

PropTypeDefaultDescription
eyebrowstring'Areas of practice'spaced small-caps serif, never mono in this register
headingstring'Practice areas'
introstringone measured sentence
areas*PracticeArea[]

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

Referenced types

Typestsx
export interface PracticeArea {
  name: string
  /** one plain-English sentence a client understands */
  scope: string
  /** PREFORMATTED quiet figure, e.g. '312 matters since 2009' */
  matters?: string
  href?: string
}

Frequently asked questions

How do I install the Practice Areas Grid component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/practice-areas-grid`. 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 Practice Areas Grid require?

Practice Areas Grid 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 Practice Areas Grid 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.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services