shadcn.io is not affiliated with official shadcn/ui
Author Leaderboard Blog Block for Radix UI
Six 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.
Installation
Overview
A writers' leaderboard for React with Radix UI, written for Inkhollow, a writers' collective. A header with a two-way toggle (This year, All time) sits over six rows. Each row has a rank numeral (the top three larger), an initials avatar, the writer's name and beat, a bar sized by posts against the leader, the post count and twelve weekly streak dots, one for each week the writer published. The toggle changes the figures and the order, and the six rows stay where they are and take the writer who now holds each rank, so nothing moves. A phone drops the dots and says the streak in words. The figures are example data. It's built from Guides, ToggleGroup and Avatar. For writers' collectives, newsrooms and community blogs.
FAQ
How are the rows ordered?
By posts in the chosen period, most first, with ties going to the name. orderFor(period) sorts the WRITERS list, and each row is a rank slot that takes the writer holding that rank, so the rows keep their place and only their text, bar and dots change. The toggle's choice is announced in a polite status line ("Ranked by posts this year.").
What do the streak dots mean, and how does a screen reader get them?
A filled dot is a week in which the writer published, for the last twelve weeks, oldest first; a faint one is a week without a post. The row of dots is one image with the label "Posted in 11 of the last 12 weeks", and the dots show the same in both periods. A phone hides them and writes the same count as text under the name.
How do I use my own writers?
Edit WRITERS at the top of the file: a name, a beat, the posts for the year and for all time, and the last twelve weeks as 1 or 0. Counts, bars, ranks and the dots' summary are derived. The posts counts and the weeks are example data.
How does the toggle work from the keyboard?
It's a single-choice group that always keeps one option on: Tab moves to it, the arrow keys move between This year and All time, and Space or Enter chooses.