Zum Inhalt springen
UI Kit
Accent

Rechtstexte

Impressum, Datenschutz, AGB und Cookie-Hinweise als Seiten, die man lesen kann, mit Inhaltsverzeichnis, kopierbaren Angaben und Versionsverlauf.

5 Variants
Kategorie wechseln

Details

Was Rechtstexte mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
5
Version
1.0.1 · seit 1.0.0
Datei
components/ui/legal.tsx
Bringt mit
utilskitbuttoniconrevealmotionsection
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 29 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle LegalProps aus components/ui/legal.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    LegalVariant

    documentimprintcookie-tablesummary-firstchanges

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • updatedoptional
    string

    ISO date of the last change, e.g. 2026-09-01

  • versionoptional
    string

    Version label, e.g. 3.2

  • sectionsoptional
    LegalSection[]

    document, summary-first: the text

  • groupsoptional
    LegalFactGroup[]

    imprint: the facts in groups

  • categoriesoptional
    LegalCookieCategory[]

    cookie-table: the categories

  • onSaveoptional
    (enabled: string[]) => void

    cookie-table: called with the ids of the enabled categories

  • changesoptional
    LegalChange[]

    changes: the versions, newest first

  • contactoptional
    { title: string; text: string; email?: string }

    A short note at the end, e.g. who answers questions about the text

  • printableoptional
    boolean

    Show a print button in the header

Eingebaute Texte

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

Alle 29 Texte anzeigen
updatedEnglisch Last updated {date}Deutsch Stand {date}
versionEnglisch Version {v}Deutsch Version {v}
contentsEnglisch ContentsDeutsch Inhalt
printEnglisch PrintDeutsch Drucken
readEnglisch {n}% readDeutsch {n} % gelesen
copyLinkEnglisch Copy link to this sectionDeutsch Link zu diesem Abschnitt kopieren
linkCopiedEnglisch Link copiedDeutsch Link kopiert
copyEnglisch CopyDeutsch Kopieren
copiedEnglisch CopiedDeutsch Kopiert
shortEnglisch In shortDeutsch Kurz gesagt
fullEnglisch Full textDeutsch Volltext
shortVersionEnglisch Short versionDeutsch Kurzfassung
alwaysEnglisch Always onDeutsch Immer aktiv
cookiesEnglisch {n} cookiesDeutsch {n} Cookies
cookieEnglisch 1 cookieDeutsch 1 Cookie
nameEnglisch NameDeutsch Name
providerEnglisch ProviderDeutsch Anbieter
purposeEnglisch PurposeDeutsch Zweck
durationEnglisch DurationDeutsch Dauer
saveEnglisch Save selectionDeutsch Auswahl speichern
savedEnglisch Your selection is savedDeutsch Deine Auswahl ist gespeichert
acceptAllEnglisch Allow allDeutsch Alle erlauben
currentEnglisch CurrentDeutsch Aktuell
addedEnglisch AddedDeutsch Neu
changedEnglisch ChangedDeutsch Geändert
removedEnglisch RemovedDeutsch Entfernt
showChangesEnglisch Show changesDeutsch Änderungen zeigen
hideChangesEnglisch Hide changesDeutsch Änderungen ausblenden
monthsEnglisch January,February,March,April,May,June,July,August,September,October,November,DecemberDeutsch Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Setzt aria-checked, aria-controls, aria-current, aria-expanded, aria-label und aria-labelledby, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen radio, radiogroup, status und switch.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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. 7 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Rechtstexte?

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

Welche Varianten hat Rechtstexte?

5 Varianten, Dokument mit Inhalt, Impressum, Cookie-Tabelle, Kurzfassung zuerst und Versionsverlauf. Du wählst sie mit der Prop variant, zum Beispiel variant="imprint".

Kann ich die Texte von Rechtstexte übersetzen?

Ja. Rechtstexte bringt 29 eigene Texte auf Deutsch und Englisch mit, etwa „Inhalt“, „Drucken“ und „Link zu diesem Abschnitt kopieren“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Rechtstexte einbauen?

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

Kann ich Rechtstexte ohne Code anpassen?

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

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Rechtstexte stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert