Zum Inhalt springen
UI Kit
Accent

Glossar

Die Wörter eines Fachs, einmal erklärt und schnell wiedergefunden. A bis Z mit mitlaufender Buchstabenleiste, eine Seite je Begriff, Begriffe nach Thema, markierte Begriffe in einem Text und eine Suchseite mit dem Begriff des Tages.

5 Variants
Kategorie wechseln

Glossar

A bis Z

Jeder Begriff unter seinem Buchstaben. Die Buchstabenleiste bleibt stehen, springt und folgt der Leseposition, der Filter grenzt beim Tippen ein und markiert den Treffer.

Im Studio öffnen

Begriffsseite

Ein Begriff auf eigener Seite. Die Definition groß, Erklärung, Beispiel, andere Namen, verwandte Begriffe und die Nachbarn im Alphabet.

Im Studio öffnen

Nach Thema

Themen in einem Umschalter mit gleitender Pille und Anzahl. Jeder Begriff öffnet sich an Ort und Stelle mit Erklärung und Beispiel.

Im Studio öffnen

Begriffe im Text

Ein Text mit markierten Begriffen. Darüberfahren oder Antippen zeigt die Erklärung, die Liste neben dem Text leuchtet jeden Begriff auf, sobald er gelesen wurde.

Im Studio öffnen

Details

Was Glossar mitbringt, aus Registry und Quellcode gelesen.

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

Props

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

  • variantoptional
    GlossaryVariant

    a-ztermby-topicinlinesearch

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • termsoptional
    GlossaryTerm[]
  • currentoptional
    string

    term: which term to show, by name; the first by default

  • entryoptional
    GlossaryTerm

    term: the term to show as an object, the list then only supplies neighbours and related terms

  • textoptional
    string[]

    inline: paragraphs, [[Term]] marks a term of the glossary

  • featuredoptional
    string

    search: the term of the day, by name

  • popularoptional
    string[]

    search: the most looked up terms, by name

  • indexHrefoptional
    string

    term and search: address of the full glossary, shows the link back to all terms

Eingebaute Texte

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

Alle 22 Texte anzeigen
filterEnglisch Filter termsDeutsch Begriffe filtern
placeholderEnglisch Type a wordDeutsch Ein Wort eingeben
lettersEnglisch Jump to letterDeutsch Zu Buchstabe springen
countEnglisch {n} termsDeutsch {n} Begriffe
noneEnglisch No term matches “{q}”. Try a shorter word.Deutsch Kein Begriff passt zu „{q}“. Versuch ein kürzeres Wort.
clearEnglisch Clear filterDeutsch Filter leeren
exampleEnglisch ExampleDeutsch Beispiel
akaEnglisch Also calledDeutsch Auch genannt
relatedEnglisch Related termsDeutsch Verwandte Begriffe
previousEnglisch Previous termDeutsch Vorheriger Begriff
nextEnglisch Next termDeutsch Nächster Begriff
backEnglisch All termsDeutsch Alle Begriffe
topicsEnglisch TopicsDeutsch Themen
inTextEnglisch Terms in this textDeutsch Begriffe in diesem Text
defineEnglisch Show definition of {t}Deutsch Erklärung zu {t} zeigen
searchEnglisch Search the glossaryDeutsch Im Glossar suchen
searchPhEnglisch What would you like to understand?Deutsch Was möchtest du verstehen?
resultsEnglisch {n} resultsDeutsch {n} Treffer
todayEnglisch Term of the dayDeutsch Begriff des Tages
popularEnglisch Looked up mostDeutsch Am häufigsten nachgeschlagen
readEnglisch Read the explanationDeutsch Erklärung lesen
browseEnglisch Browse A to ZDeutsch Von A bis Z stöbern

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Glossar reagiert selbst auf die Tasten Escape, Enter, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-controls, aria-current, aria-describedby, aria-expanded, aria-label, aria-labelledby, aria-live und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen listbox, option, tab, tablist, tabpanel und tooltip.
  • 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.
  • 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 Glossar?

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

Welche Varianten hat Glossar?

5 Varianten, A bis Z, Begriffsseite, Nach Thema, Begriffe im Text und Suchseite. Du wählst sie mit der Prop variant, zum Beispiel variant="term".

Kann ich die Texte von Glossar übersetzen?

Ja. Glossar bringt 22 eigene Texte auf Deutsch und Englisch mit, etwa „Begriffe filtern“, „Ein Wort eingeben“ und „Zu Buchstabe springen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Glossar einbauen?

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

Kann ich Glossar ohne Code anpassen?

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

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Glossar stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert