shadcn.io is not affiliated with official shadcn/ui
Three Column Resource Roll Blog Block for React Aria
A link roll in three ruled columns, Books, Tools and Papers: a monogram tile, an external link, the source domain in mono, one line on why, and a Copy button for the link.
Installation
Overview
A resources block for React with React Aria, written for Further Shelf, a research-methods blog. A start-aligned header sits over three columns of resources (Books, Tools, Papers) on shared hairlines that end the block. Each row has a monogram tile (the title's letter, drawn), the title as an external link that opens in a new tab, the source's domain in mono, one line on why it is on the shelf and a Copy button that really copies the link to the clipboard. It's built from CopyButton and Guides. The titles are invented and every domain ends in .example, so no link points at a real site. On a phone the three groups stack.
FAQ
How do I add a resource?
Add an entry to a shelf in SHELVES: a title, a monogram letter, the domain, a path and one line on why. The link, the Copy button's text, the group count and the header's "Nine sources" derive from it. Replace the .example domains with real ones.
What does Copy do?
It puts the row's full link on the clipboard and says "Link to … copied" to screen readers. It uses the browser's clipboard, so on a page that isn't served over HTTPS it can fail, and the button shows a cross instead of pretending.
How is the row a link?
The title is the row's only link, and its after: covers the whole row, so the row is one big target with a focus ring inside it. The Copy button sits above it, so it still takes its own press. The link opens in a new tab with rel="noopener noreferrer", and a hidden "(opens in a new tab)" says so.