shadcn.io is not affiliated with official shadcn/ui
Alpha Index Comments Block for Radix UI
Sixteen glossary comments grouped by the first letter of the author's name in a held scroll region, with sticky letter heads, an A to Z rail that scrolls to each group and a first or last name switch.
Installation
Overview
Browse comments the way you browse a directory with this A to Z index for React with Radix UI. A compact header names the glossary, and one hairline frame holds a Segment Group ("Group by" First name or Last name), a rail of all 26 letters and a held scroll region of comments under sticky letter heads, each with its count in a Badge. Letters that have comments are buttons: pressing one scrolls the region to its group, and the letter in view follows the scroll and is marked as current. The other letters are hollow and say "No comments under Q" when pressed. Switching the grouping regroups the comments and goes back to the top. The rail is two columns beside the region and a strip that scrolls sideways above it on a phone. For glossaries, member directories and any long list that people look up by name.
FAQ
How do I fill it with my own people and comments?
Edit PEOPLE (a first and a last name) and REMARKS (the author id, an ISO at and the words). The letters come from LETTERS; for another alphabet replace that list and the key function letterOf. Groups are derived, so an empty letter is simply hollow in the rail.
How does the jump work?
Each group is a section marked with its letter. Pressing a letter sets the region's scrollTop to the section's offset, with no smooth scrolling, so reduced motion needs no special case. A scroll handler reads which section is at the top and marks that letter as current; nothing runs on a timer.
How are names sorted?
By the chosen name with localeCompare, then by date. Pass a locale to it if your names need a particular order, and strip prefixes such as "van" or "de" in letterOf if your directory files them under the next word.
What stays local?
The grouping and the scroll position live in the page, and the comments are a typed list. To make it real, load the index of letters with their counts from the server and fetch a group when its letter is pressed, so a long directory does not load at once.
Is it accessible?
The rail is a navigation with a button per letter, named with its count ("B: 2 comments"); hollow letters keep their place, are marked unavailable and explain themselves when pressed. The current letter is marked current. The region is a labelled scroll area you can reach with Tab and scroll with the arrow keys, and each jump is read out in the polite status line.