Skip to content
UI Kit
Accent color

Legal pages

Imprint, privacy policy, terms and cookie notices as pages people can read, with contents, copyable facts and a version history.

5 variants
Switch category

Details

What Legal pages brings along, read from the registry and the source.

Area
Content
Variants
5
Version
1.0.1 · since 1.0.0
File
components/ui/legal.tsx
Brings along
utilskitbuttoniconrevealmotionsection
npm packages
None
Languages
English and German, 29 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The LegalProps interface from components/ui/legal.tsx, with the comments from the code.

  • variantoptional
    LegalVariant

    documentimprintcookie-tablesummary-firstchanges

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    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

Built-in texts

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

Show all 29 texts
updatedEnglish Last updated {date}German Stand {date}
versionEnglish Version {v}German Version {v}
contentsEnglish ContentsGerman Inhalt
printEnglish PrintGerman Drucken
readEnglish {n}% readGerman {n} % gelesen
copyLinkEnglish Copy link to this sectionGerman Link zu diesem Abschnitt kopieren
linkCopiedEnglish Link copiedGerman Link kopiert
copyEnglish CopyGerman Kopieren
copiedEnglish CopiedGerman Kopiert
shortEnglish In shortGerman Kurz gesagt
fullEnglish Full textGerman Volltext
shortVersionEnglish Short versionGerman Kurzfassung
alwaysEnglish Always onGerman Immer aktiv
cookiesEnglish {n} cookiesGerman {n} Cookies
cookieEnglish 1 cookieGerman 1 Cookie
nameEnglish NameGerman Name
providerEnglish ProviderGerman Anbieter
purposeEnglish PurposeGerman Zweck
durationEnglish DurationGerman Dauer
saveEnglish Save selectionGerman Auswahl speichern
savedEnglish Your selection is savedGerman Deine Auswahl ist gespeichert
acceptAllEnglish Allow allGerman Alle erlauben
currentEnglish CurrentGerman Aktuell
addedEnglish AddedGerman Neu
changedEnglish ChangedGerman Geändert
removedEnglish RemovedGerman Entfernt
showChangesEnglish Show changesGerman Änderungen zeigen
hideChangesEnglish Hide changesGerman Änderungen ausblenden
monthsEnglish January,February,March,April,May,June,July,August,September,October,November,DecemberGerman Januar,Februar,März,April,Mai,Juni,Juli,August,September,Oktober,November,Dezember

Accessibility

Read from the source of the component.

  • Sets aria-checked, aria-controls, aria-current, aria-expanded, aria-label and aria-labelledby, so screen readers announce purpose and state.
  • Uses the roles radio, radiogroup, status and switch.
  • Announces changes through a live region without moving focus.
  • 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. 7 places in the code switch motion off then.

Frequent questions

How do I install Legal pages?

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

Which variants does Legal pages have?

5 variants, Document with contents, Imprint, Cookie table, Summary first and Version history. You pick one with the variant prop, for example variant="imprint".

Can I translate the texts of Legal pages?

Yes. Legal pages carries 29 texts of its own in English and German, such as “Contents”, “Print” and “Copy link to this section”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Legal pages?

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

Can I adjust Legal pages without code?

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

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Legal pages on a page.

Often searched

Jump to

Copied to the clipboard