shadcn.io is not affiliated with official shadcn/ui
Three Column Resource Roll Blog Block for React
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 Base UI, 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.
Related
- Pro
Citable Publications About
Press and recognitionA bibliography for a research platform: eight publications as a numbered list in citation form, a type filter, and a Cite button on each row that copies the reference.
- Pro
Scroll Panel Glossary Blog
Topics and indexesA glossary in a fixed-height scroll panel: sticky letter headings, a part-of-speech tag per term, See also buttons that open a hover card and scroll to the term, and a posts link.
- 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
Recommendations Picker Blog
Reading toolsA Because you read picker: a Select chooses one of three reviews you read and four recommended reviews change with a drawn book spine, a thin match bar and a percentage, labelled as example data.
- Pro
Tabbed Code Snippets Blog
Article partsA code window with a tab per file, numbered lines, marked keywords and a Copy button that really copies, beside the three posts the snippets come from.
- Pro
Brand kit tabs About
Press and recognitionA brand kit for a brand-kit product: tabs for the mark, the theme's own colour tokens with a copy button, a type specimen, and do and don't pairs.