Skip to content
UI Kit
Accent color

Documentation

Docs pages with chapters, the page and its contents, a quickstart with progress, an API reference and the footer of every page.

4 variants
Switch category

Documentation

Three columns

Chapters with a filter on the left, the page in the middle, contents that follow the reading on the right. Phones get the chapters as a disclosure.

Open in Studio

Quickstart

Steps in order with code to copy and a check per step. The bar on top fills with every check, the line fills while you scroll.

Open in Studio

API reference

Method, path and parameters on the left. Request examples and responses by status on the right, the status switch glides.

Open in Studio

Page footer

Was this helpful, with a note when it was not. Previous and next with arrows that move, the last update and a link to edit.

Open in Studio

Details

What Documentation brings along, read from the registry and the source.

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

Props

The DocsProps interface from components/ui/docs.tsx, with the comments from the code.

  • variantoptional
    DocsVariant

    three-columnquickstartapi-referencepage-footer

  • breadcrumbsoptional
    string[]

    Path above the title, e.g. ['Guides', 'Webhooks']

  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • navoptional
    DocsNavGroup[]

    three-column: the chapters

  • sectionsoptional
    DocsSection[]

    three-column: the page

  • stepsoptional
    DocsStep[]

    quickstart: the steps

  • endpointoptional
    DocsEndpoint

    api-reference: the endpoint

  • previousoptional
    { title: string; href: string }

    page-footer: neighbours

  • nextoptional
    { title: string; href: string }
  • updatedoptional
    string

    page-footer: when the page changed, as shown

  • editHrefoptional
    string

    page-footer: link to the source of the page

  • onFeedbackoptional
    (helpful: boolean, note?: string) => void

    page-footer: called with yes or no and an optional note

Built-in texts

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

Show all 30 texts
docsEnglish DocumentationGerman Dokumentation
crumbsEnglish BreadcrumbGerman Brotkrumen
menuEnglish ChaptersGerman Kapitel
filterEnglish Filter chaptersGerman Kapitel filtern
noMatchEnglish No chapter matches.German Kein Kapitel passt.
onThisPageEnglish On this pageGerman Auf dieser Seite
backToTopEnglish Back to topGerman Nach oben
doneEnglish Mark as doneGerman Als erledigt markieren
undoneEnglish DoneGerman Erledigt
progressEnglish {a} of {b} steps doneGerman {a} von {b} Schritten erledigt
allDoneEnglish All set. You are ready to build.German Alles bereit. Du kannst loslegen.
paramsEnglish ParametersGerman Parameter
requiredEnglish requiredGerman Pflicht
optionalEnglish optionalGerman optional
requestEnglish RequestGerman Anfrage
responseEnglish ResponseGerman Antwort
helpfulEnglish Was this page helpful?German War diese Seite hilfreich?
yesEnglish YesGerman Ja
noEnglish NoGerman Nein
thanksEnglish Thank you for telling us.German Danke für deine Rückmeldung.
whatMissingEnglish What was missing? Your note goes straight to the docs team.German Was hat gefehlt? Deine Notiz geht direkt an das Doku-Team.
sendEnglish Send noteGerman Notiz senden
sentEnglish Thank you. We read every note.German Danke. Wir lesen jede Notiz.
previousEnglish PreviousGerman Zurück
nextEnglish NextGerman Weiter
updatedEnglish Last updated {date}German Zuletzt geändert am {date}
editEnglish Edit this pageGerman Diese Seite bearbeiten
noteEnglish NoteGerman Hinweis
warningEnglish CarefulGerman Achtung
successEnglish Good to knowGerman Gut zu wissen

Accessibility

Read from the source of the component.

  • Sets aria-current, aria-expanded, aria-label, aria-labelledby, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles status, tab and tablist.
  • 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. 5 places in the code switch motion off then.

Frequent questions

How do I install Documentation?

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

Which variants does Documentation have?

4 variants, Three columns, Quickstart, API reference and Page footer. You pick one with the variant prop, for example variant="quickstart".

Can I translate the texts of Documentation?

Yes. Documentation carries 30 texts of its own in English and German, such as “Documentation”, “Breadcrumb” and “Chapters”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Documentation?

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

Can I adjust Documentation without code?

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

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Documentation on a page.

Often searched

Jump to

Copied to the clipboard