Skip to content
UI Kit
Accent color

Glossary

The words of a field, explained once and found again. A to Z with a letter bar that follows, a page per term, terms by topic, terms marked in a text and a search page with the term of the day.

5 variants
Switch category

Glossary

A to Z

Every term under its letter. The letter bar sticks, jumps and follows the reading position, the filter narrows and marks the match as you type.

Open in Studio

Term page

One term on its own page. Definition set large, explanation, example, other names, related terms and the neighbors in the alphabet.

Open in Studio

By topic

Topics in a switch with a gliding pill and a count. Each term opens in place with its explanation and an example.

Open in Studio

Terms in a text

A text with its terms marked. Hover or press shows the definition, the list beside the text lights up each term once it was read.

Open in Studio

Details

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

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

Props

The GlossaryProps interface from components/ui/glossary.tsx, with the comments from the code.

  • 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

Built-in texts

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

Show all 22 texts
filterEnglish Filter termsGerman Begriffe filtern
placeholderEnglish Type a wordGerman Ein Wort eingeben
lettersEnglish Jump to letterGerman Zu Buchstabe springen
countEnglish {n} termsGerman {n} Begriffe
noneEnglish No term matches “{q}”. Try a shorter word.German Kein Begriff passt zu „{q}“. Versuch ein kürzeres Wort.
clearEnglish Clear filterGerman Filter leeren
exampleEnglish ExampleGerman Beispiel
akaEnglish Also calledGerman Auch genannt
relatedEnglish Related termsGerman Verwandte Begriffe
previousEnglish Previous termGerman Vorheriger Begriff
nextEnglish Next termGerman Nächster Begriff
backEnglish All termsGerman Alle Begriffe
topicsEnglish TopicsGerman Themen
inTextEnglish Terms in this textGerman Begriffe in diesem Text
defineEnglish Show definition of {t}German Erklärung zu {t} zeigen
searchEnglish Search the glossaryGerman Im Glossar suchen
searchPhEnglish What would you like to understand?German Was möchtest du verstehen?
resultsEnglish {n} resultsGerman {n} Treffer
todayEnglish Term of the dayGerman Begriff des Tages
popularEnglish Looked up mostGerman Am häufigsten nachgeschlagen
readEnglish Read the explanationGerman Erklärung lesen
browseEnglish Browse A to ZGerman Von A bis Z stöbern

Accessibility

Read from the source of the component.

  • Glossary handles the keys Escape, Enter, Arrow up, Arrow down, Arrow left, Arrow right and Space itself.
  • Sets aria-controls, aria-current, aria-describedby, aria-expanded, aria-label, aria-labelledby, aria-live and aria-selected, so screen readers announce purpose and state.
  • Uses the roles listbox, option, tab, tablist, tabpanel and tooltip.
  • 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.
  • 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. 3 places in the code switch motion off then.

Frequent questions

How do I install Glossary?

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

Which variants does Glossary have?

5 variants, A to Z, Term page, By topic, Terms in a text and Search page. You pick one with the variant prop, for example variant="term".

Can I translate the texts of Glossary?

Yes. Glossary carries 22 texts of its own in English and German, such as “Filter terms”, “Type a word” and “Jump to letter”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Glossary?

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

Can I adjust Glossary without code?

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

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Glossary on a page.

Often searched

Jump to

Copied to the clipboard