Kanzlei

Für Kanzleien, Notariate und Steuerberatung. Rechtsgebiete mit Mandaten und Ansprechpartnern, die Anwälte, Erstberatung mit Fristabfrage, Ergebnisse und Honorar.

5 Variants

Kategorie wechseln

Rechtsgebiete

Rechtsgebiete als Kacheln, das gewählte öffnet ein Band mit typischen Mandaten und den zuständigen Anwälten. Auf dem Telefon ein Akkordeon.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/law-firm

Bringt mit 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

Anwälte

Ein Verzeichnis mit Namen, Rechtsgebieten und Zulassung. Mit der Maus folgt das Porträt dem Zeiger, jede Zeile öffnet Sprachen und Kontakt zum Kopieren.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/law-firm

Bringt mit 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

Erstberatung

Die Pauschale und drei Schritte auf einer Linie, die sich beim Scrollen füllt. Das Formular fragt nach Rechtsgebiet, Kanal und laufender Frist, die ein Datum und den Rückruf noch heute öffnet.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/law-firm

Bringt mit 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

Ergebnisse

Ein Fall vorn mit Ausgangslage, Ergebnis und einer Zahl, die hochzählt, weitere daneben. Nach Rechtsgebiet filtern, die Karten blenden über.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/law-firm

Bringt mit 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

Honorar

Drei Honorarmodelle, das erste breit. Daneben eine Schätzung nach Erfahrung und Stunden mit gleitender Summe und ein Hinweis zur Rechtsschutzversicherung.

Im Studio öffnen

Installv1.0.1

aiw add @ai-website/law-firm

Bringt mit 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

Was Kanzlei mitbringt, aus Registry und Quellcode gelesen.

Bereich: Industries
Variants: 5
Version: 1.0.1 · seit 1.1.0
Datei: components/ui/law-firm.tsx
Bringt mit: utilskitbutton icon input textarearevealsectionmotionnumber-ticker slider
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 48 eigene Texte
Studio: Alle 5 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle LawFirmProps aus components/ui/law-firm.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

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

Eingebaute Texte

Diese Texte schreibt Kanzlei selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 48 Texte anzeigen

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

Aus dem Quellcode der Component abgeleitet.

Kanzlei reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links und Pfeil rechts.
Setzt aria-checked, aria-controls, aria-expanded, aria-invalid, aria-label, aria-labelledby, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen group, radio, radiogroup, status, tab, tablist und tabpanel.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Kanzlei?

Mit aiw add @ai-website/law-firm. Der Befehl legt die Datei components/ui/law-firm.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, input, textarea, reveal, section, motion, number-ticker und slider. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Kanzlei?

5 Varianten, Rechtsgebiete, Anwälte, Erstberatung, Ergebnisse und Honorar. Du wählst sie mit der Prop variant, zum Beispiel variant="lawyers".

Kann ich die Texte von Kanzlei übersetzen?

Ja. Kanzlei bringt 48 eigene Texte auf Deutsch und Englisch mit, etwa „Typische Mandate“, „Ihre Ansprechpartner“ und „Sprachen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Kanzlei einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Kanzlei mit aiw_components und installieren sie mit aiw_add @ai-website/law-firm. Nenn im Prompt die Variante, etwa variant="practice-areas", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Kanzlei ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden LawFirm-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Kanzlei stehen.

Kanzlei

Rechtsgebiete

Anwälte

Erstberatung

Ergebnisse

Honorar

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit