Skip to main content
Clever Ops

Attorney Profile Rows

A firm directory of horizontal profile rows, serif names with admission years, focus areas in a middot run, matter counts and a direct line. Letterhead gravitas, not cards with badges.

Preview & code

Loading Attorney Profile Rows preview
Open in v0

Installation

pnpm dlx shadcn@latest add @cleverui/attorney-profile-row

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

Usage

tsx
import { AttorneyProfileRow } from '@/components/blocks/attorney-profile-row'
Exampletsx
'use client'

import { AttorneyProfileRow } from '@/components/blocks/attorney-profile-row'

export default function AttorneyProfileRowDemo() {
  return (
    <AttorneyProfileRow
      heading="Our attorneys"
      intro="Counsel who have argued before the courts that matter to your case."
      attorneys={[
        {
          name: 'Eleanor Whitfield',
          admitted: 'Admitted 1998',
          role: 'Partner · Litigation',
          focusAreas: [
            'Commercial disputes',
            'Professional negligence',
            'Appellate advocacy',
          ],
          matters: '80+ trials',
          phone: '+61 2 9012 4401',
          href: '#whitfield',
        },
        {
          name: 'Marcus Chen',
          admitted: 'Admitted 2004',
          role: 'Partner · Corporate',
          focusAreas: ['M&A', 'Private equity', 'Cross-border structures'],
          matters: '140+ closings',
          phone: '+61 2 9012 4408',
          href: '#chen',
        },
        {
          name: 'Priya Nair SC',
          admitted: 'Admitted 2001',
          role: 'Senior Counsel · Equity',
          focusAreas: ['Estates', 'Trusts', 'Elder law'],
          matters: '60+ jury trials',
          phone: '+61 2 9012 4415',
          href: '#nair',
        },
        {
          name: 'James Okafor',
          admitted: 'Admitted 2012',
          role: 'Special Counsel · Employment',
          focusAreas: [
            'Workplace investigations',
            'Restraint of trade',
            'Executive exits',
          ],
          matters: '200+ matters',
          phone: '+61 2 9012 4422',
          href: '#okafor',
        },
      ]}
    />
  )
}

API reference

AttorneyProfileRow accepts the following props.

PropTypeDefaultDescription
headingstring'Our attorneys'–
introstring–one measured sentence under the heading
attorneys*AttorneyProfile[]––
directLineLabelstring'Direct line'–

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

Referenced types

Typestsx
export interface AttorneyProfile {
  name: string
  /** PREFORMATTED, e.g. 'Admitted 2004' */
  admitted?: string
  role?: string
  focusAreas?: string[]
  /** quiet figure, e.g. '60+ jury trials' */
  matters?: string
  /** renders as the row's direct line (tel:) */
  phone?: string
  href?: string
}

Frequently asked questions

How do I install the Attorney Profile Rows component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/attorney-profile-row`. 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 Attorney Profile Rows require?

Attorney Profile Rows 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 Attorney Profile Rows 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