Law firm

For law firms, notaries and tax advisers. Areas of law with matters and contacts, the lawyers, a first consultation with deadline check, results and fees.

5 variants

Switch category

Areas of law

Areas as tiles, the chosen one opens a band with typical matters and the lawyers in charge. An accordion on phones.

Open in Studio

Installv1.0.1

aiw add @ai-website/law-firm

Brings along utils, kit, button, icon, input, textarea, reveal, section, motion, number-ticker, slider

Usage

<LawFirm variant="practice-areas" areas={[{ id, title, icon, summary, matters, lawyers }]} lawyers={[…]} contactHref="/contact" />

Source

Lawyers

A register with names, areas and admission. With a mouse the portrait follows the pointer, every row opens languages and contact details to copy.

Open in Studio

Installv1.0.1

aiw add @ai-website/law-firm

Brings along utils, kit, button, icon, input, textarea, reveal, section, motion, number-ticker, slider

Usage

<LawFirm variant="lawyers" lawyers={[{ name, title, image, areas, since, languages, email, phone }]} />

Source

First consultation

The flat fee and three steps on a line that fills when scrolled to. The form asks for area, channel and a running deadline, which opens a date and a promise to call back today.

Open in Studio

Installv1.0.1

aiw add @ai-website/law-firm

Brings along utils, kit, button, icon, input, textarea, reveal, section, motion, number-ticker, slider

Usage

<LawFirm variant="consultation" consultationFee={190} steps={[{ title, text }]} areas={[…]} onSubmit={(d) => …} />

Source

Results

One case in front with situation, outcome and a figure that counts up, more next to it. Filter by area, the cards blend over.

Open in Studio

Installv1.0.1

aiw add @ai-website/law-firm

Brings along utils, kit, button, icon, input, textarea, reveal, section, motion, number-ticker, slider

Usage

<LawFirm variant="cases" cases={[{ id, area, title, situation, outcome, figure: { value, currency, label }, court, year }]} />

Source

Fees

Three fee models, the first one wide. Next to it an estimate by seniority and hours with the sum gliding along, and a note on legal expenses insurance.

Open in Studio

Installv1.0.1

aiw add @ai-website/law-firm

Brings along utils, kit, button, icon, input, textarea, reveal, section, motion, number-ticker, slider

Usage

<LawFirm variant="fees" fees={[{ id, title, description, icon, amount, unit, points }]} rates={[{ label, amount }]} />

Source

Details

What Law firm brings along, read from the registry and the source.

Area: Industries
Variants: 5
Version: 1.0.1 · since 1.1.0
File: components/ui/law-firm.tsx
Brings along: utilskitbutton icon input textarearevealsectionmotionnumber-ticker slider
npm packages: None
Languages: English and German, 48 texts of its own
Studio: All 5 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The LawFirmProps interface from components/ui/law-firm.tsx, with the comments from the code.

variantoptional
LawFirmVariant
practice-areaslawyersconsultationcasesfees
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
areasoptional
LawArea[]
lawyersoptional
Lawyer[]
casesoptional
LawCase[]
feesoptional
LawFeeModel[]
consultationFeeoptional
number
consultation: the fixed fee of a first consultation, net
stepsoptional
{ title: string; text: string }[]
consultation: what happens, in order
assurancesoptional
{ icon?: IconName; text: string }[]
consultation: short promises under the steps
ratesoptional
{ label: string; amount: number }[]
fees: hourly rates by seniority for the estimate
currencyoptional
string
contactHrefoptional
string
Where "Ask about …" and similar links go
onSubmitoptional
(data: Record<string, string>) => void

Built-in texts

Law firm writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 48 texts

Key	English	German
matters	English Typical matters	German Typische Mandate
contacts	English Your contacts	German Ihre Ansprechpartner
askArea	English Ask about {area}	German Zu {area} anfragen
admitted	English Admitted {year}	German Zugelassen seit {year}
languages	English Languages	German Sprachen
copy	English Copy	German Kopieren
copied	English Copied	German Kopiert
write	English Email	German E-Mail
call	English Call	German Anrufen
areaLabel	English Area of law	German Rechtsgebiet
pickArea	English Please choose	German Bitte wählen
summary	English Your matter in a few sentences	German Ihr Anliegen in wenigen Sätzen
summaryHint	English No documents yet, we ask for them when we need them.	German Noch keine Unterlagen, die fragen wir an, wenn wir sie brauchen.
channel	English How would you like to talk?	German Wie möchten Sie sprechen?
office	English At the office	German In der Kanzlei
phoneCh	English By phone	German Am Telefon
video	English Video call	German Per Video
deadline	English Is a deadline running?	German Läuft eine Frist?
deadlineYes	English Yes, there is a deadline	German Ja, es gibt eine Frist
deadlineNo	English No deadline that I know of	German Keine, von der ich weiß
deadlineDate	English Deadline ends on	German Frist endet am
deadlineNote	English We call you back today. Deadlines in employment law can be as short as three weeks.	German Wir rufen Sie heute noch zurück. Im Arbeitsrecht sind Fristen oft nur drei Wochen lang.
name	English Name	German Name
email	English Email	German E-Mail
phone	English Phone	German Telefon
required	English Please fill in this field.	German Bitte füllen Sie dieses Feld aus.
invalidEmail	English Please enter a valid email address.	German Bitte geben Sie eine gültige E-Mail-Adresse ein.
send	English Request a first consultation	German Erstberatung anfragen
sent	English Your request is with us	German Ihre Anfrage ist bei uns
sentText	English A lawyer reads it today and we will suggest a time within one working day. Everything you tell us is confidential.	German Eine Anwältin liest sie noch heute, einen Termin schlagen wir innerhalb eines Werktags vor. Alles, was Sie uns schreiben, bleibt vertraulich.
again	English Send another request	German Weitere Anfrage senden
confidential	English Confidential from the first sentence	German Vertraulich ab dem ersten Satz
flat	English flat fee	German pauschal
net	English plus VAT	German zzgl. MwSt.
all	English All areas	German Alle Rechtsgebiete
filter	English Filter by area	German Nach Rechtsgebiet filtern
outcome	English Outcome	German Ergebnis
situation	English Situation	German Ausgangslage
estimate	English Your estimate	German Ihre Schätzung
hours	English Hours of work	German Arbeitsstunden
hoursN	English {n} h	German {n} Std.
estimateNote	English An estimate for planning, not an offer. We agree on the fee in writing before we start.	German Eine Schätzung zur Planung, kein Angebot. Das Honorar vereinbaren wir vor Beginn schriftlich.
perHour	English per hour	German pro Stunde
insured	English Legal expenses insurance	German Rechtsschutzversicherung
insuredText	English We ask your insurer for cover and bill them directly.	German Wir holen die Deckungszusage ein und rechnen direkt mit Ihrer Versicherung ab.
model	English Fee model	German Honorarmodell
of	English {n} of {total}	German {n} von {total}
from	English from	German ab

Read from the source of the component.

Law firm handles the keys Arrow up, Arrow down, Arrow left and Arrow right itself.
Sets aria-checked, aria-controls, aria-expanded, aria-invalid, aria-label, aria-labelledby, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
Uses the roles group, radio, radiogroup, status, tab, tablist and tabpanel.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Law firm?

With aiw add @ai-website/law-firm. The command puts components/ui/law-firm.tsx into your project, the code is yours from then on. It brings along button, icon, input, textarea, reveal, section, motion, number-ticker and slider. It needs no further npm packages.

Which variants does Law firm have?

5 variants, Areas of law, Lawyers, First consultation, Results and Fees. You pick one with the variant prop, for example variant="lawyers".

Can I translate the texts of Law firm?

Yes. Law firm carries 48 texts of its own in English and German, such as “Typical matters”, “Your contacts” and “Languages”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Law firm?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Law firm with aiw_components and install it with aiw_add @ai-website/law-firm. Name the variant in your prompt, for example variant="practice-areas", and the assistant writes your content straight into the props.

Can I adjust Law firm without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching LawFirm code to copy.

Similar components

More from Industries, the same area of the kit.

Often combined with

Sections that usually sit next to Law firm on a page.

Law firm

Areas of law

Lawyers

First consultation

Results

Fees

Details

Props

Built-in texts

Accessibility

Motion

Frequent questions

Similar components, Often combined with

Similar components

Often combined with