shadcn.io is not affiliated with official shadcn/ui
Role Filter Contributors Blog Block for React
A press's contributors as an avatar group with a count, a role toggle (All, Staff, Guest, Editors) with a live Showing 3 of 9 line, and a captioned table of name, role badge, articles and month joined that never changes height.
Installation
Overview
A contributors table for React with Base UI, written for Cobblemoor Press, a community press. A start-aligned header carries an overlapping avatar group with "+4" and the count ("9 contributors, 2 editors"). Under it a role toggle (All, Staff, Guest, Editors) sits beside a live line ("Showing 3 of 9 contributors, staff"), and a table runs rail to rail and ends the block: name with an initials avatar, a role badge, articles and the month joined, most articles first. The toggle hides rows, and an unseen copy of the full table holds the height, so nothing below or above moves. A phone shows the name with the articles and month under it, and the role. Every count is read from the typed list. It's built from Guides, AvatarGroup, ToggleGroup, Badge and a native table. For presses, newsrooms and community blogs.
FAQ
How do I use my own contributors?
Edit CONTRIBUTORS at the top of the file: a name, a role ("Staff", "Guest" or "Editor"), articles and joined as an ISO month ("2024-06"). The count in the header, the "+4" on the avatar group, "2 editors" and the "Showing 3 of 9" line are calculated from the list, so adding a row updates all of them. The first five contributors appear in the avatar group.
How does the role filter work?
It is a single-choice toggle group that always keeps one option on, and "All" is the default. Choosing a role hides the other rows; the status line says how many remain, politely, for screen readers. The table is always as tall as the full list because an unseen copy of every row sits in the same cell, so the page doesn't jump. The arrow keys move between the options, and they flip in a right-to-left page.
Why a native table, and how is it named?
The table needs a caption, column and row headers and a layout the same on every library, so it is a native table with a visually hidden caption, th scope="col" headers and the name as a th scope="row". It is not the catalog Table, which on React Aria is a grid.
Related
- Pro
Hover Card Author Grid Blog
Authors and staffSix writers in a three by two grid of cells on shared hairlines: initials avatar, role, a bio clamped to two lines, a posts link, and a hover card on the name and avatar with the writer's three newest titles that also opens on focus.
- Pro
Author Leaderboard Blog
Authors and staffSix writers ranked by posts with a bar, a count and twelve weekly streak dots, and a This year / All time toggle that changes the figures and the order.
- Pro
Author Profile Blog
Authors and staffOne writer's profile in a split: a large initials avatar, name and role, a bio, icon links with tooltips, a Follow toggle that reads Following, three figures from her posts, and her four newest posts as a list.
- Pro
Posts Table Blog
Post listsTen posts in a sortable table on one ruled band: title, author, date, reading time and category, with column headings that are buttons and say which way they sort.
- Pro
Contributors Wall Team
Projects and workloadA wall of 24 contributors to a static-site generator in hairline cells, under a band of four totals (contributors, commits, pull requests and stars) added up from the data.
- Pro
Directory Blog
Topics and indexesA map blog's A to Z index as a framed command palette: twenty-four posts grouped by the letter they start with, a filter field, arrow keys, a count and key hints at the foot.