shadcn.io is not affiliated with official shadcn/ui
Staff Bookshelf Team Picks Blog Block for React
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 Base UI, 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.
Related
- Pro
Margin Note Editorial Blog
Featured storyThree editor's picks as split rows: the post with a numeral tile at the start and, in a tinted margin cell at the end, the editor's note with a hanging quote mark and a marked reason.
- Pro
Recommendations Picker Blog
Reading toolsA Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.
- Pro
Q and A Interview Blog
Story formatsAn interview told in four question-and-answer bands: the host's question at the start, the guest's answer at the end, both speakers' initials avatars in the header, and one phrase marked with a highlighter.
- Pro
Role Filter Contributors Blog
Authors and staffA 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.
- Pro
Reading Picks Team
Interests and clubsOne teammate's three recommendations, a book, an article and a talk, as hairline rows with a kind badge, a link, a one-line reason and a Save toggle that counts how many colleagues saved it.
- Pro
Editorial Testimonial
One big quoteA magazine-style testimonial: a compact header with a Shine Button, then one long quote in two serif columns that open with a drop cap, on a page framed by hairline corners with + marks, with an em-dash byline and the publication it appeared in.