shadcn.io is not affiliated with official shadcn/ui
Hover Card Author Grid Blog Block for React Aria
Six writers in a three by two grid of cells on shared hairlines: initials avatar, role, a bio clamped to two lines, a posts link, and a hover card on the name and avatar with the writer's three newest titles that also opens on focus.
Installation
Overview
A grid of writers for React with React Aria, written for the Gullmoor Quarterly, a coastal-life magazine. A centred header sits over six cells that share their hairlines and run from rail to rail, three across on a desktop and two on a tablet. Each cell has the writer's initials avatar, name and role as one link, a bio clamped to two lines and a "6 posts" link with an arrow. A hover card on the avatar and name shows the writer's three newest titles with their dates; it opens on keyboard focus as well as on hover. The post counts and the three titles are read from each writer's typed list of posts. A phone shows four cells with a "Show all 6 writers" button for the rest. It's built from Guides, Avatar, HoverCard and Button. For magazines, newsrooms and company blogs that introduce their writers.
FAQ
How do I add writers?
Edit WRITERS at the top of the file. A writer has a name, a role, a bio and a posts list of { date, title } entries with fixed ISO dates. The count in "6 posts" is the list's length, the hover card shows the three newest by date, and the grid keeps working with any number of writers (the phone shows the first four until "Show all"). Six fill two rows of three and three rows of two.
Is the hover card the only way to see the titles?
No. It is a preview. The "6 posts" link in every cell goes to the writer's archive, where the same posts are listed. The card opens when the pointer rests on the avatar and name, and it opens when the link takes keyboard focus; Escape closes it. Nothing in it is a control.
What does a phone show?
One column of four cells and a "Show all 6 writers" ghost button under them. The button keeps its label and sets aria-expanded; pressing it reveals the other two cells without moving the page. At tablet width the grid is two columns and shows all six.