shadcn.io is not affiliated with official shadcn/ui
Scroll Panel Glossary Blog Block for Vue
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 Vue with Ark 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.