Glossary Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// 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 (
    <GlossaryPage
      linkComponent={Link}
      layout="split"
      terms={GLOSSARY_TERMS}
      termOfTheDay="critical-path"
      onCopyLink={(id) => console.log("copied", id)}
    />
  )
}

Props

• designdefault "classic"
  "classic" | "editorial" | "minimal"

  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.

• layoutdefault "split"
  "split" | "list"

  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.

• termsdefault "GLOSSARY_TERMS"
  GlossaryTerm[]

  { 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.

• categoriesdefault "GLOSSARY_CATEGORIES"
  GlossaryCategory[]

  { value, label, description? } for the topic chips and tags.

• populardefault "GLOSSARY_POPULAR"
  string[]

  Term ids for the Popular chips under the search.

• termOfTheDaydefault "wip-limit"
  string

  The id featured in the hero card.

• resourcesdefault "GLOSSARY_RESOURCES"
  GlossaryResource[]

  { kind, title, description, action, href } for the Put these terms to work cards.

• labelsdefault "DEFAULT_GLOSSARY_PAGE_LABELS"
  Partial<GlossaryPageLabels>

  Every visible string.

• hrefsdefault "DEFAULT_GLOSSARY_PAGE_HREFS"
  Partial<GlossaryPageHrefs>

  { signUp, contact }: the final call to action.

• query
  string

  The search text, controlled. Pair it with onQueryChange.

• defaultQuerydefault ""
  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.

• defaultCategorydefault "all"
  string

  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).

• defaultActiveTermdefault "null"
  string | 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.

• searchShortcutdefault "/"
  string

  Focuses the search from anywhere; an empty string binds nothing.

• updateddefault "2026-10-12"
  string

  ISO date (yyyy-mm-dd) of the last edit, shown in the hero eyebrow and formatted with the locale.

• showTermOfTheDaydefault true
  boolean

  The Term of the day card with its drawing.

• showPopulardefault true
  boolean

  The Popular chips under the search.

• showLettersdefault true
  boolean

  The sticky A to Z rail.

• showCategoriesdefault true
  boolean

  The topic chips with counts.

• showExamplesdefault true
  boolean

  The drawn In Acme example in each entry.

• showResourcesdefault true
  boolean

  The Put these terms to work cards.

• showCtadefault true
  boolean

  The final call to action.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The active letter, the selected topic, the row marker and the highlights inside the drawings.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Get started free and the header's Get started.

• headerdefault true
  boolean

  The shared marketing header.

• footerdefault true
  boolean

  The shared marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Overrides for the header, spread last.

• footerProps
  Partial<MarketingFooterProps>

  Overrides for the footer, spread last.

• animateIndefault true
  boolean

  The hero rises in once on mount; false keeps it still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the A to Z sort, the counts and the Updated date.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every page link (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<GlossaryPageSlot, string>>

  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