Skip to main content
Clever Ops

Law Firm Template

Complete law-firm site set as a bound legal brief, double-rule serif headings, clause-numbered practice selector, sober results band, fee disclosure accordion, partner roll, consult intake.

Preview & code

Loading Law Firm Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-law-firm

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

Usage

tsx
import { TemplateLawFirm } from '@/components/blocks/template-law-firm'
Exampletsx
import { TemplateLawFirm } from '@/components/blocks/template-law-firm'

export default function TemplateLawFirmDemo() {
  return <TemplateLawFirm />
}

API reference

TemplateLawFirm accepts the following props.

PropTypeDefaultDescription
contentLawFirmContentdefaultContentoverride any slice of the page, defaults to the Ashworth & Vane fixture above
classNamestring

Referenced types

Typestsx
export interface LawFirmContent {
  /** identity, nav wordmark, footer */
  brand: { name: string; descriptor: string; established: string }
  nav: { links: LawFirmLink[]; phone: LawFirmLink }
  /** the first page of the brief: wordmark, position, phone, firm ledger */
  hero: {
    kicker: string
    statement: string
    lede: string
    consultLink: LawFirmLink
    phone: { display: string; href: string; prefix: string; note: string }
    factsTitle: string
    facts: LawFirmFact[]
    factsNote: string
  }
  /** the admission strip under the hero */
  credentials: { items: string[] }
  /** 01, the areas as clauses: pick one, the panel answers */
  practice: {
    ref: string
    kicker: string
    title: string
    lede: string
    selectorLabel: string
    mattersLabel: string
    outcomesLabel: string
    areas: LawFirmPracticeArea[]
    note: string
  }
  /** 02, sober figures first, then matter by matter */
  results: {
    ref: string
    kicker: string
    title: string
    lede: string
    figuresLabel: string
    figures: LawFirmFigure[]
    figuresDisclaimer: string
    mattersLabel: string
    matters: LawFirmMatter[]
    mattersDisclaimer: string
  }
  /** 03, the numbered ledger of a matter */
  process: {
    ref: string
    kicker: string
    title: string
    lede: string
    stages: LawFirmStage[]
    note: string
  }
  /** 04, the disclosure, opened line by line */
  fees: {
    ref: string
    kicker: string
    title: string
    lede: string
    models: LawFirmFeeModel[]
    emphasisLabel: string
    bestForLabel: string
    assurance: string
  }
  /** 05, the roll of partners */
  people: {
    ref: string
    kicker: string
    title: string
    lede: string
    lawyers: LawFirmPerson[]
    directLineLabel: string
    note: string
  }
  /** 06, the intake: matter type, name, contact, conflict check */
  consult: {
    ref: string
    kicker: string
    title: string
    lede: string
    bringTitle: string
    bringItems: string[]
    privilegeNote: string
    form: {
      matterLabel: string
      matterPlaceholder: string
      matterOptions: string[]
      nameLabel: string
      namePlaceholder: string
      contactLabel: string
      contactPlaceholder: string
      conflictNote: string
      buttonLabel: string
    }
    confirmation: { title: string; ref: string; body: string; resetLabel: string }
  }
  footer: {
    tagline: string
    columns: { label: string; links: LawFirmLink[] }[]
    contactLabel: string
    contact: { label: string; value: string; href: string }[]
    disclosuresTitle: string
    disclosures: string[]
    legal: LawFirmLink[]
    meta: string[]
  }
}

export interface LawFirmLink {
  label: string
  href: string
}

export interface LawFirmFact {
  label: string
  /** preformatted, e.g. "1987" or "$280 fixed" */
  value: string
}

export interface LawFirmPracticeArea {
  /** clause reference, e.g. "1.1" */
  ref: string
  name: string
  /** one sober paragraph on the area */
  summary: string
  /** the work the firm takes in this area */
  matters: string[]
  /** stated carefully, never as promises */
  outcomes: string[]
  /** the quiet record line, e.g. "312 matters since 2009" */
  record: string
}

export interface LawFirmFigure {
  ref: string
  /** preformatted, e.g. "$240m" */
  value: string
  label: string
}

export interface LawFirmMatter {
  ref: string
  area: string
  /** one or two anonymised sentences */
  summary: string
  outcome: string
  /** preformatted, e.g. "2025" */
  year: string
}

export interface LawFirmStage {
  ref: string
  title: string
  body: string
  /** preformatted, e.g. "Week 1" */
  timeframe: string
}

export interface LawFirmFeeModel {
  ref: string
  name: string
  /** preformatted, e.g. "$1,650" */
  figure: string
  /** e.g. "typical estate package" */
  figureNote: string
  summary: string
  bestFor: string
  terms: string[]
  /** at most one model, earns the marker */
  emphasized?: boolean
}

export interface LawFirmPerson {
  ref: string
  name: string
  /** e.g. "Admitted 1987" */
  admitted: string
  role: string
  focus: string[]
  /** direct line, rendered as a tel: link */
  phone: string
}

Frequently asked questions

How do I install the Law Firm Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-law-firm`. 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 Law Firm Template require?

Law Firm Template 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 Law Firm Template 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