shadcn.io is not affiliated with official shadcn/ui
Scroll Panel Glossary Blog Block for React
A glossary in a fixed-height scroll panel: sticky letter headings, a part-of-speech tag per term, See also buttons that open a hover card and scroll to the term, and a posts link.
Installation
Overview
A glossary block for React with Base UI, written for Lexicon Lane, a linguistics blog. A header at the start gives the headline and three counts worked out from the terms; behind a divider a framed panel holds fourteen terms in a fixed-height scroll region. Terms are a description list under sticky letter headings (only letters that have terms); each has its part of speech as a tag, a one-sentence definition, "See also" buttons and a "Used in 3 posts" link. A "See also" button opens a hover card with the other term's definition, on hover, on focus and on a tap, and pressing it scrolls the panel to that term. It's built from HoverCard, Badge and Guides. There is no A to Z rail.
FAQ
How do I add a term?
Add an entry to TERMS: an id, the term, its part of speech, a definition, the ids of the terms it points to and the ids of the posts that use it. Keep the list in alphabetical order. The letters, the sticky headings, the counts in the header and "Used in 3 posts" all derive from it.
How does See also work?
Each is a button: hovering it, focusing it or tapping it opens a card with the other term's definition. Pressing it also scrolls the panel so that term sits under the sticky letter and moves focus to it. The definition is in the panel anyway, so nothing is only on hover.
How does the panel work from the keyboard?
The panel is a labelled region you can focus: arrow keys and Page Up and Down scroll it, and Tab moves through the See also buttons and links inside. Smooth scrolling is off when the reader prefers reduced motion.
Is it a real description list?
Yes. Each term is a dt with its definition in a dd, grouped in a div, under a heading per letter. Screen readers announce the list and the number of terms in each letter.
Related
- Pro
Glossary Term Grid Features
Documents and objectsA glossary: an A to Z rail of anchor links where only letters with a term are active, and eight terms in two columns of shared hairlines, each with its part of speech, a definition and a See also link.
- Pro
Knowledge Base Tree Blog
Topics and indexesA help centre's articles as a working tree of topics beside a preview of the picked article: its topic, title, two-sentence summary, last update and an Open article link.
- Pro
Scrolling Article Table of Contents Blog
Article partsA framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
- Pro
Three Column Resource Roll Blog
Topics and indexesA link roll in three ruled columns, Books, Tools and Papers: a monogram tile, an external link, the source domain in mono, one line on why, and a Copy button for the link.
- Pro
Tabbed Code Snippets Blog
Article partsA code window with a tab per file, numbered lines, marked keywords and a Copy button that really copies, beside the three posts the snippets come from.
- Pro
Post-Linked Accordion FAQ Blog
Story formatsReader questions answered by posts: a single-open accordion of six how-things-work questions, each answer ending in a linked post chip with the post's title and reading time.