Dokumentation
Doku-Seiten mit Kapiteln, der Seite und ihrem Inhalt, ein Quickstart mit Fortschritt, eine API-Referenz und der Fuß jeder Seite.
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Dokumentation
Details
Was Dokumentation mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- Content
- Variants
- 4
- Version
- 1.0.1 · seit 1.0.0
- Datei
- components/ui/docs.tsx
- Bringt mit
- utilskitbuttoncode-blockiconrevealmotionsection
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 30 eigene Texte
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle DocsProps aus components/ui/docs.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalDocsVariantthree-columnquickstartapi-referencepage-footer
breadcrumbsoptionalstring[]Path above the title, e.g. ['Guides', 'Webhooks']
titleoptionalReact.ReactNodedescriptionoptionalReact.ReactNodenavoptionalDocsNavGroup[]three-column: the chapters
sectionsoptionalDocsSection[]three-column: the page
stepsoptionalDocsStep[]quickstart: the steps
endpointoptionalDocsEndpointapi-reference: the endpoint
previousoptional{ title: string; href: string }page-footer: neighbours
nextoptional{ title: string; href: string }updatedoptionalstringpage-footer: when the page changed, as shown
editHrefoptionalstringpage-footer: link to the source of the page
onFeedbackoptional(helpful: boolean, note?: string) => voidpage-footer: called with yes or no and an optional note
Eingebaute Texte
Diese Texte schreibt Dokumentation selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 30 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| docs | Englisch Documentation | Deutsch Dokumentation |
| crumbs | Englisch Breadcrumb | Deutsch Brotkrumen |
| menu | Englisch Chapters | Deutsch Kapitel |
| filter | Englisch Filter chapters | Deutsch Kapitel filtern |
| noMatch | Englisch No chapter matches. | Deutsch Kein Kapitel passt. |
| onThisPage | Englisch On this page | Deutsch Auf dieser Seite |
| backToTop | Englisch Back to top | Deutsch Nach oben |
| done | Englisch Mark as done | Deutsch Als erledigt markieren |
| undone | Englisch Done | Deutsch Erledigt |
| progress | Englisch {a} of {b} steps done | Deutsch {a} von {b} Schritten erledigt |
| allDone | Englisch All set. You are ready to build. | Deutsch Alles bereit. Du kannst loslegen. |
| params | Englisch Parameters | Deutsch Parameter |
| required | Englisch required | Deutsch Pflicht |
| optional | Englisch optional | Deutsch optional |
| request | Englisch Request | Deutsch Anfrage |
| response | Englisch Response | Deutsch Antwort |
| helpful | Englisch Was this page helpful? | Deutsch War diese Seite hilfreich? |
| yes | Englisch Yes | Deutsch Ja |
| no | Englisch No | Deutsch Nein |
| thanks | Englisch Thank you for telling us. | Deutsch Danke für deine Rückmeldung. |
| whatMissing | Englisch What was missing? Your note goes straight to the docs team. | Deutsch Was hat gefehlt? Deine Notiz geht direkt an das Doku-Team. |
| send | Englisch Send note | Deutsch Notiz senden |
| sent | Englisch Thank you. We read every note. | Deutsch Danke. Wir lesen jede Notiz. |
| previous | Englisch Previous | Deutsch Zurück |
| next | Englisch Next | Deutsch Weiter |
| updated | Englisch Last updated {date} | Deutsch Zuletzt geändert am {date} |
| edit | Englisch Edit this page | Deutsch Diese Seite bearbeiten |
| note | Englisch Note | Deutsch Hinweis |
| warning | Englisch Careful | Deutsch Achtung |
| success | Englisch Good to know | Deutsch Gut zu wissen |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Setzt aria-current, aria-expanded, aria-label, aria-labelledby, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen status, tab und tablist.
- 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. 5 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Dokumentation?
Mit aiw add @ai-website/docs. Der Befehl legt die Datei components/ui/docs.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, code-block, icon, reveal, motion und section. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Dokumentation?
4 Varianten, Drei Spalten, Quickstart, API-Referenz und Seitenfuß. Du wählst sie mit der Prop variant, zum Beispiel variant="quickstart".
Kann ich die Texte von Dokumentation übersetzen?
Ja. Dokumentation bringt 30 eigene Texte auf Deutsch und Englisch mit, etwa „Dokumentation“, „Brotkrumen“ und „Kapitel“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Dokumentation einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Dokumentation mit aiw_components und installieren sie mit aiw_add @ai-website/docs. Nenn im Prompt die Variante, etwa variant="three-column", dann schreibt der Assistent deine Inhalte direkt in die Props.
Kann ich Dokumentation ohne Code anpassen?
Ja, im Studio. Alle 4 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Docs-Code zum Kopieren.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus Content, demselben Bereich des Kits.
- RechtstexteImpressum, Datenschutz, AGB und Cookie-Hinweise, die man lesen kann.
- Ressourcen und DownloadsLeitfäden, Vorlagen und Dateien zum Herunterladen, Öffnen oder Freischalten.
- Events und WebinarsAgendas, Speaker, Tickets und Recordings.
- PodcastShows, Episoden, Kapitel und Shownotes.
- Alles aus ContentSections, die erzählen und fragen. Blog, Long Reads, Team, About, Docs, Rechtstexte, Kontakt und Formulare.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Dokumentation stehen.
- Help CenterKnowledge Bases, Guides und der Weg zum Support.
- SuchergebnisseErgebnisseiten, Filter, Sofortsuche und das leere Ergebnis.
- UnternavigationNavigation innerhalb einer Seite und auf dem Telefon. Abschnittsleisten mit Scroll-Spy, Inhaltsverzeichnisse und Tab-Leisten unten.
- Changelog und RoadmapWas neu ist und was als Nächstes kommt.
Quellcode lädt