Skip to main content
Clever Ops

Matter Process Steps

How a legal matter proceeds, numbered serif stages with plain-English descriptions and quiet timeframe figures. A near-still React process block styled with Tailwind.

Preview & code

Loading Matter Process Steps preview

Installation

pnpm dlx shadcn@latest add @cleverui/matter-process-steps

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

Usage

tsx
import { MatterProcessSteps } from '@/components/blocks/matter-process-steps'
Exampletsx
'use client'

import { MatterProcessSteps } from '@/components/blocks/matter-process-steps'

export default function MatterProcessStepsDemo() {
  return (
    <MatterProcessSteps
      eyebrow="How we work"
      heading="How your matter proceeds"
      intro="Every engagement follows the same disciplined path, whatever the matter."
      stages={[
        {
          title: 'Initial conference',
          description:
            'We listen carefully, identify the real issues, and tell you honestly whether we are the right firm, and what the work is likely to cost.',
          timeframe: 'Week 1',
        },
        {
          title: 'Engagement & strategy',
          description:
            'A written retainer sets scope, fees, and responsibilities. We agree a strategy and a first set of deliverables before any substantive work begins.',
          timeframe: 'Weeks 1–2',
        },
        {
          title: 'Investigation & advice',
          description:
            'Documents are gathered, positions tested, and risks set out in plain language. You receive written advice you can act on.',
          timeframe: 'Weeks 2–6',
        },
        {
          title: 'Negotiation',
          description:
            'Most matters resolve here. We press your position firmly, keep options open, and report progress without theatre.',
          timeframe: 'Weeks 4–16',
        },
        {
          title: 'Proceedings if required',
          description:
            'If court or tribunal work is necessary, we prepare thoroughly, manage the calendar, and keep you informed of every material step.',
          timeframe: 'As required',
        },
        {
          title: 'Resolution & close',
          description:
            'Orders are sealed, settlements documented, and the file closed with a clear record of what was achieved and what remains.',
          timeframe: 'Final weeks',
        },
      ]}
      note="Most matters resolve before trial. We prepare every one as though it will not."
    />
  )
}

API reference

MatterProcessSteps accepts the following props.

PropTypeDefaultDescription
eyebrowstring'How we work'spaced small-caps serif, never mono in this register
headingstring'How your matter proceeds'
introstringone measured sentence
stages*MatterStage[]4–6 stages in true order
notestring'Most matters resolve before trial. We prepare every one as though it will not.'closing line set beneath the final stage

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

Referenced types

Typestsx
export interface MatterStage {
  title: string
  /** one or two plain-English sentences a client understands */
  description: string
  /** PREFORMATTED, e.g. 'Weeks 2–6', never computed */
  timeframe?: string
}

Frequently asked questions

How do I install the Matter Process Steps component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/matter-process-steps`. 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 Matter Process Steps require?

Matter Process Steps 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 Matter Process Steps 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