Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Glossary Term Grid Features Block for Radix UI

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

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A glossary feature section for React with Radix UI, shown for Termbase, a terminology tool. A header says what the page is for, then a band holds the alphabet: every letter is drawn, and only the ones that start a term are links, so the rail shows at a glance what the glossary covers. Below it, eight terms sit in two columns of cells divided by shared hairlines, each with the term, a Badge for its part of speech, one definition and a "See also" link to a neighbouring entry. Following a link tints its target cell. On a phone the rail scrolls sideways and the terms stack in one column. It's built from Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For glossaries, style guides, API vocabularies and any product with words worth defining.

FAQ

How do I add or change terms?

Edit TERMS at the top of the file, in alphabetical order: each entry has a term, its speech, a definition and the related term it points to. The rail is built from the same list: a letter becomes a link when a term starts with it, and links to the first one, so adding a term needs no other edit. Keep related the name of another entry, because the link goes to that entry's cell.

How is it marked up for assistive technology?

The terms are a description list: each term is a dt with its definitions in dd elements, so a screen reader announces them as pairs. The rail is a nav named "Glossary index", and each link says its letter and its term ("A, Alias"). The letters without a term are decorative and hidden from assistive technology.

How do the anchor links work?

They are plain # links to each cell's id, so they work without JavaScript, jump with the browser's own scrolling and show up in the address bar. The cell you land on gets a :target tint, and scroll-margin keeps it clear of the top edge.

Why do the cells share hairlines?

A grid with one pixel between its cells, on a border-coloured background, draws one line where two cells meet instead of doubling it. The page's rails and top rule come from the Guides spine, and each band draws its rule with Guides, so + marks land where it meets the rails. The last row draws no bottom rule, because the next block's top rule is the edge.

What moves, and what happens with reduced motion?

The header fades up once when the page loads, with a CSS transition. Nothing else moves. With reduced motion the transition is off and the section simply appears.

How does it fit on a phone?

The 26 letters are too wide for a phone, so the rail becomes a row that scrolls sideways, with each link still reachable by keyboard. The terms stack in one column, so every definition has the full width. Nothing else scrolls sideways at 320 pixels.

All 170 features blocks