shadcn.io is not affiliated with official shadcn/ui
Reading Picks Team Block for React Aria
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 React Aria, 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 isSelected and onChange.
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.