shadcn.io is not affiliated with official shadcn/ui
Role Filter Contributors Blog Block for Ark UI
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 Ark 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 with Tab entering the group; this library ignores right-to-left for the arrow keys.
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.