Free React Law Firm Components
Legal clients hire confidence, and law firm websites too often perform it with marble columns and adjectives. These components argue with evidence instead: a case results band, representative matters list, attorney profile rows built around admissions and practice history, a practice areas grid, matter process steps that demystify an engagement, a fee structure sheet that answers the question everyone has, a consultation intake panel, and a plain-language glossary that translates the Latin. Gravitas through clarity, not decoration.
8 components · MIT licensed · installable with the shadcn CLI
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.
Case Results Band
An anonymized results strip, large tabular outcomes like $4.2M recovered counting up once with measured restraint between hairline seams, over a formal disclaimer line.
Consultation Intake Panel
An initial-consultation panel, what to bring as a ruled list, a serif-italic confidentiality note, a plain fee line, and one formal action. Nearly still, certain of itself.
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.
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.
Plain Language Glossary
Legal terms translated, serif terms with always-visible plain-English glosses and measured disclosure rows for the full explanation. An accessible React glossary in Tailwind.
Practice Areas Grid
Practice areas as formal hairline tiles, serif area names, one-sentence plain-English scope lines, and matter counts in quiet tabular figures. Measured, precise, badge-free.
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.
Frequently asked questions
Can we publish case results ethically?
Rules vary by jurisdiction, many bars require disclaimers that results do not guarantee outcomes, and some restrict specifics. The case results band and representative matters list include dedicated disclaimer slots; run the final copy past your professional conduct rules.
How should a small firm use the fee structure sheet?
Publish what you can commit to: fixed fees for defined matters, ranges with the variables named, hourly rates with expectations set. Fee transparency is a competitive advantage for smaller firms precisely because large firms rarely offer it.
Do these components suit conveyancers, mediators, and other legal-adjacent practices?
Yes, the process steps, fee sheet, and intake panel translate directly. The attorney profile rows work for any credentialed practitioner; rename the labels through props to match your title and regulator.