shadcn.io is not affiliated with official shadcn/ui
Tag Popover Cards Blog Block for React Aria
Three post cells on shared hairlines, each with a drawn wood-grain cover and three tag chips; a post with more tags shows a +3 button that opens a popover of the rest as links with counts.
Installation
Overview
A post card row with tags for React with React Aria, written for Tagwood, a forestry trade magazine. Three cells share their hairlines in one row from rail to rail, one on a phone. Each cell leads with a drawn wood-grain cover bled to its edges (growth rings, flat-sawn grain parting round a knot, quarter-sawn lines with ray flecks), then the post's tags as pill chips, the title as the cell's one link, a dek and a byline. A post shows its first three tags; one with more shows a "+3" button that opens a popover listing the rest as links with the number of posts under each. The chips and the button sit above the cell's link, so each stays its own target. The block ends in the row, and the next section's top rule closes it. It's built from Guides, Badge, Avatar and Popover, with CSS for the entrance and the hover. For trade magazines, documentation blogs and any post list where tags matter but space doesn't allow them all.
FAQ
How do the tags and the +3 work?
Each post lists its tags (a name and a count) in DRAFTS; the first three become chips and the rest go to rest. When a post has more than three, a "+N" button follows the chips, with an accessible name such as "Show 3 more tags". The button opens a popover headed "More tags" with one link per remaining tag and its count. A post with three tags or fewer shows no button.
How does the popover behave?
It opens on click, Enter or Space, closes on Escape or a click elsewhere, and returns focus to the button. The page behind stays usable. The button is React Aria's, which the popover trigger needs, placed below it at its start edge.
Why are the chips links when the card is one link?
A card is one link, its title, and its target covers the cell. The chips and the "+3" button are raised above it with relative z-10, so a click on a chip goes to the tag, not the post. Chips are links in the page's order, before the title.
How are the covers drawn, and can I use photos?
Each tag family owns one wood-grain pattern, built from path data at the top of the file in two weights of the foreground colour: light at 20% and strong at 60%. Put an img with size-full object-cover in the cover's frame to use a photograph; the frame keeps its aspect ratio and the hairline under it.