shadcn.io is not affiliated with official shadcn/ui
Reading Picks Team Block for React
One 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.
Installation
Overview
A recommendations section about one person for React with Base UI, written for Lowther, a fictional newsletter tool. A start-aligned header puts the teammate (an initials avatar, a name and a role) beside its title, "What Ingrid is reading". Under it, three rows share hairlines rail to rail: a book, an article and a talk. Each row has a kind badge with an icon and a word, its length, the title as a link, who made it, one line on why it is worth the time, and a Save toggle at the end that shows how many colleagues saved it. Pressing Save adds you to the count; pressing it again takes you out. A status line at the foot says how many of the three you saved. Saves live on the page only: nothing is sent or stored. It is built from Toggle, Badge, Avatar and Guides with your theme's tokens. The person, the books and the counts are made up for the example.
FAQ
How do I change the picks?
Edit PERSON and PICKS at the top of the file. A pick has a kind (Book, Article or Talk) with its icon, a title, who made it, a length, one line on why, and the number of colleagues who already saved it (count). The row layout doesn't depend on the kind, so you can add a fourth.
What does Save do?
It changes the page and nothing else. The toggle is pressed, the count goes up by one and the status line at the foot reads "You saved 1 of 3". Reload and it is gone. To keep saves, call your own endpoint where the toggle's change handler is and seed the pressed state from what it returns.
The toggle takes pressed and onPressedChange.
How is the toggle named for a screen reader?
Its name is a sentence with the title and the count ("Save The Subject Line Is a Promise, saved by 24"), and its pressed state is announced, so the count isn't read twice. The icon, the word and the number inside it are hidden from assistive technology. The status line is a polite live region that is in the page from the start, so a change is announced.
Why is a saved pick filled with the foreground colour, not the primary?
A page keeps its primary for one action. A saved toggle is a state, so it turns to the foreground colour with the icon filled, which reads in any theme and keeps AA contrast pressed, hovered and focused.
Related
- Pro
Reading List Team
Interests and clubsShelf tabs over a framed shelf of book spines of different heights and thickness; choosing a spine shows the title, the author and the teammate's note, in a live region under the shelf.
- Pro
Book Club Team
Interests and clubsA split showing a bookshop's current club read, with a chapter progress bar, the members reading along and the next meeting, beside a drawn cover plate, over a band that opens the past reads.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.
- Pro
Podcasts Team
Interests and clubsA podcast host's own show: the latest episode in a framed cell with a drawn waveform and a Listen link, over earlier episodes as rows with a length bar and a Newest or Longest switch.
- Pro
Course Steps Learning Path Team
Learning and mentoringOne person's study path for a certification as read-only vertical steps: five courses in hairline rows, ticked when done, a halo on the one in progress, each with a quiet bar and the hours to go.
- Pro
Meetups Team
Interests and clubsFour community organisers as rows with a twelve-month cadence strip, filled where a meetup ran, plus the next topic, when the group meets, its members and a Remind me toggle.