Skip to main content
Clever Ops

Representative Matters List

Anonymized representative matters in bound-casebook serif, practice-area labels, quiet outcomes and years, and a consent disclaimer. A React proof list styled with Tailwind.

Preview & code

Loading Representative Matters List preview

Installation

pnpm dlx shadcn@latest add @cleverui/representative-matters-list

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

Usage

tsx
import { RepresentativeMattersList } from '@/components/blocks/representative-matters-list'
Exampletsx
'use client'

import { RepresentativeMattersList } from '@/components/blocks/representative-matters-list'

export default function RepresentativeMattersListDemo() {
  return (
    <RepresentativeMattersList
      eyebrow="Selected engagements"
      heading="Representative matters"
      intro="A sample of the work, chosen for range rather than size."
      matters={[
        {
          area: 'Commercial litigation',
          summary:
            'Acted for a national logistics group in a $14M contract dispute arising from a failed warehouse automation rollout.',
          outcome: 'Resolved at mediation',
          year: '2025',
        },
        {
          area: 'Corporate & M&A',
          summary:
            'Advised the sellers of a specialist medical-device manufacturer on a private equity sale, including earn-out architecture and management retention.',
          outcome: 'Transaction completed',
          year: '2024',
        },
        {
          area: 'Employment & workplace',
          summary:
            'Represented a listed insurer in restraint and confidential-information proceedings against a departing executive team.',
          outcome: 'Consent orders obtained',
          year: '2024',
        },
        {
          area: 'Property & construction',
          summary:
            'Acted for a mid-market developer in a multi-party building-defect claim involving façade and waterproofing failures across two towers.',
          outcome: 'Settled before hearing',
          year: '2023',
        },
        {
          area: 'Regulatory & inquiries',
          summary:
            'Prepared a financial-services licensee for examination before a parliamentary inquiry, coordinating document production and witness preparation.',
          outcome: 'Inquiry concluded without adverse finding against the client',
          year: '2023',
        },
      ]}
      disclaimer="Matter descriptions are anonymized and published with client consent. Outcomes turn on the facts of each matter."
    />
  )
}

API reference

RepresentativeMattersList accepts the following props.

PropTypeDefaultDescription
eyebrowstring'Selected engagements'spaced small-caps serif, never mono in this register
headingstring'Representative matters'
introstringone measured sentence
matters*RepresentativeMatter[]
disclaimerstring'Matter descriptions are anonymized and published with client consent. Outcomes turn on the facts of each matter.'genuine consent copy set beneath the list

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

Referenced types

Typestsx
export interface RepresentativeMatter {
  area?: string
  /** one or two anonymized sentences */
  summary: string
  outcome?: string
  /** PREFORMATTED, e.g. '2025', never constructed as a Date */
  year?: string
}

Frequently asked questions

How do I install the Representative Matters List component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/representative-matters-list`. 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 Representative Matters List require?

Representative Matters List 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 Representative Matters List 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