# Glossary Page > An A to Z glossary of teamwork terms: instant search, a sticky letter rail, topic filters and entries with drawn In Acme examples. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add glossary-page` - Docs: https://wingo-ui.com/templates/glossary-page ## Interaction Press / anywhere to focus the big search. Matches drop down as you type, best name matches first with the typed letters marked; Arrow Up and Down move the highlight, Enter (or a click) opens that term and scrolls to it, and Escape clears the field. The list below filters with the same query and shows how many terms match, with Clear filters. The Popular chips and the Term of the day card jump straight to their entry. A sticky A to Z rail sits under the header: letters without terms are disabled, the letter under the rail lights up as you scroll, and a tap scrolls to that letter (on phones the rail scrolls sideways and keeps the active letter in view). Topic chips (Agile, Planning, Metrics...) filter the list and show live counts. In the split layout the list sits beside a sticky detail panel on desktop: click a term or walk the list with the arrow keys and the panel swaps to it, with the longer explanation, an In Acme drawing (a burndown, a Kanban column over its WIP limit, a RACI matrix, a Gantt with the critical path...), related terms, Previous and Next and Copy link; below 1024px the same entry opens in a bottom sheet (a side panel on tablets). In the list layout each entry expands in place. Related chips jump to their term, Copy link copies the URL with the term's #anchor and announces it, and opening the page with #sprint opens and scrolls to Sprint. Every target is 44px on touch; reduced motion jumps instead of gliding. ## Installation ```bash npx wingo-ui@latest add glossary-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/glossary-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/glossary-page.tsx` - `components/templates/glossary-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Drawer](https://wingo-ui.com/components/drawer) ([Markdown](https://wingo-ui.com/components/drawer.md)) - [Empty State](https://wingo-ui.com/components/empty-state) ([Markdown](https://wingo-ui.com/components/empty-state.md)) - [Kbd](https://wingo-ui.com/components/kbd) ([Markdown](https://wingo-ui.com/components/kbd.md)) - [Search Input](https://wingo-ui.com/components/search-input) ([Markdown](https://wingo-ui.com/components/search-input.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [useMediaQuery](https://wingo-ui.com/components/use-media-query) ([Markdown](https://wingo-ui.com/components/use-media-query.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Text match](https://wingo-ui.com/components/text-match) ([Markdown](https://wingo-ui.com/components/text-match.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/glossary/page.tsx "use client" import Link from "next/link" import { GlossaryPage } from "@/components/templates/glossary-page" import { GLOSSARY_TERMS } from "@/components/templates/glossary-page-data" export default function GlossaryRoute() { return ( console.log("copied", id)} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "editorial" \| "minimal"` | `"classic"` | The whole page's look. classic: a split hero over a dot grid with a raised Term of the day card, raised panels and a gray resources band; editorial: a centered serif opening, a dictionary-style entry of the day between heavy rules, italic serif letters, flat panels, a centered header and footer; minimal: a transparent header, quiet medium type, small mono letters, outlined panels, no bands and a simple footer. headerProps and footerProps still win. | | `layout?` | `"split" \| "list"` | `"split"` | split: the list beside a sticky detail panel from 1024px, a bottom sheet (side panel on tablets) below; list: one column of entries that expand in place. | | `terms?` | `GlossaryTerm[]` | `"GLOSSARY_TERMS"` | { id, term, aka?, category, definition, body, example?, related?, keywords? } per entry. id is the #anchor; example is { visual?, text } where visual names one of the drawn illustrations; related holds other ids. Sorted A to Z with the locale. | | `categories?` | `GlossaryCategory[]` | `"GLOSSARY_CATEGORIES"` | { value, label, description? } for the topic chips and tags. | | `popular?` | `string[]` | `"GLOSSARY_POPULAR"` | Term ids for the Popular chips under the search. | | `termOfTheDay?` | `string` | `"wip-limit"` | The id featured in the hero card. | | `resources?` | `GlossaryResource[]` | `"GLOSSARY_RESOURCES"` | { kind, title, description, action, href } for the Put these terms to work cards. | | `labels?` | `Partial` | `"DEFAULT_GLOSSARY_PAGE_LABELS"` | Every visible string. | | `hrefs?` | `Partial` | `"DEFAULT_GLOSSARY_PAGE_HREFS"` | { signUp, contact }: the final call to action. | | `query?` | `string` | | The search text, controlled. Pair it with onQueryChange. | | `defaultQuery?` | `string` | `""` | The starting search text while uncontrolled; it filters the list. | | `onQueryChange?` | `(query: string) => void` | | Every change of the search text. | | `category?` | `string` | | The selected topic value or "all", controlled. | | `defaultCategory?` | `string` | `"all"` | The starting topic while uncontrolled. | | `onCategoryChange?` | `(category: string) => void` | | Runs when a topic chip is picked. | | `activeTerm?` | `string \| null` | | The open term's id, controlled (null: none). | | `defaultActiveTerm?` | `string \| null` | `"null"` | The starting open term while uncontrolled. In the split layout the panel shows the first term when none is open. | | `onActiveTermChange?` | `(id: string \| null) => void` | | Runs when a term opens or closes. | | `onCopyLink?` | `(id: string, url: string) => void` | | Runs after a Copy link press with the term's id and the copied URL. | | `searchShortcut?` | `string` | `"/"` | Focuses the search from anywhere; an empty string binds nothing. | | `updated?` | `string` | `"2026-10-12"` | ISO date (yyyy-mm-dd) of the last edit, shown in the hero eyebrow and formatted with the locale. | | `showTermOfTheDay?` | `boolean` | `true` | The Term of the day card with its drawing. | | `showPopular?` | `boolean` | `true` | The Popular chips under the search. | | `showLetters?` | `boolean` | `true` | The sticky A to Z rail. | | `showCategories?` | `boolean` | `true` | The topic chips with counts. | | `showExamples?` | `boolean` | `true` | The drawn In Acme example in each entry. | | `showResources?` | `boolean` | `true` | The Put these terms to work cards. | | `showCta?` | `boolean` | `true` | The final call to action. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The active letter, the selected topic, the row marker and the highlights inside the drawings. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Get started free and the header's Get started. | | `header?` | `boolean` | `true` | The shared marketing header. | | `footer?` | `boolean` | `true` | The shared marketing footer. | | `headerProps?` | `Partial` | | Overrides for the header, spread last. | | `footerProps?` | `Partial` | | Overrides for the footer, spread last. | | `animateIn?` | `boolean` | `true` | The hero rises in once on mount; false keeps it still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the A to Z sort, the counts and the Updated date. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every page link (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, title, search, results, popular, today, rail, categories, list, group, letter, term, detail, sheet, visual, related, empty, resources, cta and footer. | ## Parts ### GlossaryIllustration (component) One of the drawn In Acme mini UIs on its own (decorative, aria-hidden, painted with the --tone vars). Takes div props. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `visual?` | `GlossaryVisual` | | burndown, burnup, kanban, raci, gantt, velocity, okr, sprint, backlog, roadmap, standup, retro, doc, automation, estimate or flow. | ### GLOSSARY_PAGE_SAMPLE (constant) All the sample content in one object: terms, categories, popular, termOfTheDay and resources. ### GLOSSARY_TERMS (constant) 44 teamwork, agile and productivity terms, from Agile to Workflow, each with a longer explanation and an In Acme example. ### GLOSSARY_CATEGORIES (constant) Agile, Planning, Metrics, Collaboration, Docs and Automation. ### GLOSSARY_POPULAR (constant) The ids behind the Popular chips. ### GLOSSARY_TERM_OF_THE_DAY (constant) The default featured id, "wip-limit". ### GLOSSARY_RESOURCES (constant) The three Put these terms to work cards: templates, academy and guides. ### GLOSSARY_VISUALS (constant) The names of the drawn illustrations. ### DEFAULT_GLOSSARY_PAGE_LABELS (constant) The English strings. ### DEFAULT_GLOSSARY_PAGE_HREFS (constant) The default link targets: /sign-up and /contact. ### GLOSSARY_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "editorial", "minimal"]. ### GlossaryPageProps (type) Props of GlossaryPage. ### GlossaryPageDesign (type) "classic" | "editorial" | "minimal". ### GlossaryPageLayout (type) "split" | "list". ### GlossaryPageSlot (type) The keys of classNames. ### GlossaryTerm (type) One entry: id, term, aka, category, definition, body, example, related and keywords. ### GlossaryExample (type) An entry's In Acme example: an optional drawing and a sentence. ### GlossaryVisual (type) The names of the drawn illustrations. ### GlossaryCategory (type) A topic: value, label and an optional description. ### GlossaryResource (type) One Put these terms to work card. ### GlossaryIllustrationProps (type) Props of GlossaryIllustration. ### GlossaryPageLabels (type) The strings labels can override. ### GlossaryPageHrefs (type) The link targets hrefs can override. ## Examples - **Editorial design**: design="editorial": a centered serif opening, a dictionary-style term of the day between heavy rules and italic serif letters. - **Minimal design**: design="minimal": a transparent header, quiet type, mono letters, outlined panels and no gray bands. - **Expandable list**: layout="list": one column of entries that expand in place, with Sprint open from the start. - **Brand orange**: tone and ctaTone brand: orange active letter, topic chip, row marker, drawing highlights and call to action. - **Filtered, inside a site layout**: Without header and footer, the Metrics topic preselected and no term of the day. ## See also - [Help Center Page](https://wingo-ui.com/templates/help-center-page) ([Markdown](https://wingo-ui.com/templates/help-center-page.md)) - [FAQ Page](https://wingo-ui.com/templates/faq-page) ([Markdown](https://wingo-ui.com/templates/faq-page.md)) - [Docs Home Page](https://wingo-ui.com/templates/docs-home-page) ([Markdown](https://wingo-ui.com/templates/docs-home-page.md)) - [Search Input](https://wingo-ui.com/components/search-input) ([Markdown](https://wingo-ui.com/components/search-input.md)) - [Drawer](https://wingo-ui.com/components/drawer) ([Markdown](https://wingo-ui.com/components/drawer.md)) --- Canonical: https://wingo-ui.com/templates/glossary-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt