Skip to main content
Clever Ops

Fee Structure Sheet

A law firm fee disclosure sheet, fixed, hourly and no-win-no-fee columns with plain-English terms and honest figures. React and Tailwind, zero pricing-card urgency.

Preview & code

Loading Fee Structure Sheet preview

Installation

pnpm dlx shadcn@latest add @cleverui/fee-structure-sheet

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

Usage

tsx
import { FeeStructureSheet } from '@/components/blocks/fee-structure-sheet'
Exampletsx
'use client'

import { FeeStructureSheet } from '@/components/blocks/fee-structure-sheet'

export default function FeeStructureSheetDemo() {
  return (
    <FeeStructureSheet
      eyebrow="Fees"
      heading="How we charge"
      intro="Three ways of engaging us. Each one agreed in writing before work begins."
      models={[
        {
          name: 'Fixed fee',
          figure: 'From $4,800',
          figureNote: 'scoped in writing',
          summary:
            'A fixed fee for a defined piece of work, a contract review, a lease negotiation, or a discrete advice letter.',
          bestFor: 'Matters with a clear scope and a predictable path.',
          terms: [
            'Scope and deliverables set out before work starts',
            'Out-of-scope work quoted and agreed in advance',
            'Disbursements billed at cost',
          ],
        },
        {
          name: 'Hourly',
          figure: '$450',
          figureNote: 'per hour',
          summary:
            'Time recorded in six-minute units, with senior and junior rates disclosed on the engagement letter.',
          bestFor: 'Open-ended disputes and advisory work that may change course.',
          terms: [
            'Monthly invoices with time entries attached',
            'Estimate revised if the matter expands',
            'No charge for administrative overhead',
          ],
          emphasized: true,
        },
        {
          name: 'No win, no fee',
          figure: '25%',
          figureNote: 'of any recovery',
          summary:
            'Our professional fees are contingent on a successful outcome. You still meet court fees and expert costs as they arise.',
          bestFor: 'Selected personal injury and plaintiff commercial claims.',
          terms: [
            'Eligibility assessed at the first conference',
            'Written agreement before any contingent work',
            'Percentage disclosed and capped in the retainer',
          ],
        },
      ]}
      note="You will have a written estimate before any work begins, and we will tell you promptly if it changes."
    />
  )
}

API reference

FeeStructureSheet accepts the following props.

PropTypeDefaultDescription
eyebrowstring'Fees'spaced small-caps serif, never mono in this register
headingstring'How we charge'
introstringone measured sentence
models*FeeModel[]
bestForLabelstring'Best for'
emphasisLabelstring'Most engagements'real-text label on the emphasized column
notestring'You will have a written estimate before any work begins, and we will tell you promptly if it changes.'closing assurance, genuine copy, not fine print

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

Referenced types

Typestsx
export interface FeeModel {
  name: string
  summary: string
  /** PREFORMATTED, e.g. '$450' or '25%' */
  figure?: string
  /** e.g. 'per hour' or 'of any recovery' */
  figureNote?: string
  bestFor?: string
  terms?: string[]
  /** at most one column should be emphasized */
  emphasized?: boolean
}

Frequently asked questions

How do I install the Fee Structure Sheet component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/fee-structure-sheet`. 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 Fee Structure Sheet require?

Fee Structure Sheet 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 Fee Structure Sheet 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