shadcn.io is not affiliated with official shadcn/ui
Staff Bookshelf Team Picks Blog Block for React Aria
A bookshelf of five staff picks on cells with line overshoot: each colleague's initials, name and role, the post they chose as a link, and one hanging-quote sentence on why, with two pickers shown as an avatar group.
Installation
Overview
A staff-picks block for React with React Aria, written for Pencilwick, a blog for teachers. A centred header sits over five cells, three across then two wider ones from lg, two across from sm and one on a phone. Each cell is a colleague (initials avatar, name, role) and the post they chose: the title is the cell's only link, its box covers the whole cell, under a hanging quote mark and one sentence on why. A post that two people picked shows both of them as an overlapping avatar group with both names and roles. Each cell has its own hairlines that run a little past its corners. It's built from Avatar, Avatar Group and Guides, with CSS for the entrance and the hover. For team blogs, school and library newsletters and any publication where the people behind it recommend what to read.
FAQ
How do I add my own picks?
Edit PICKS at the top of the file: the pickers (one or two, each a name and role), the post's title, postAuthor, minutes and href, the one-sentence quote, and a span class for the cell's width from lg (lg:col-span-2 for three across, lg:col-span-3 for two). Add a second person to pickers and the cell shows an avatar group.
How does a post with two pickers look?
The two initials avatars overlap, with a ring so each stays clear, and the names read "Ravi Menon and Selin Aydin" with both roles joined. The one quote is written for both ("We read it together…"). The avatars are decoration; the names are text.
What is the link in each cell?
The title is the only link and its ::after box covers the cell, so a click anywhere opens the post. The focus ring is drawn around the whole cell. A hidden "Picked by" comes before the colleagues' names and "Post by" before the author, so the cell reads in order.
Why do the cells have lines that run past their corners?
Each cell draws its own hairlines with the Guides component, set to run slightly past the corners and with a + mark at the start. The cells are kept two rems apart, so neighbouring lines never touch, and they are inset from the page rails.