shadcn.io is not affiliated with official shadcn/ui
Link Cell Table Block for Ark UI
A reading list whose titles are real links: an arrow and a name that says opens in a new tab on links to other sites, plain links inside the app, truncated hosts with the whole address in a title, and a preview card on hover or focus.
Installation
Overview
Make the title the way in, with this link cell table for React with Ark UI. A framed panel holds a native table of five saved links from a team bookmarking tool (title, source, kind and who saved it), a one-line legend over it explaining the arrow. A link to another site has an arrow and a name that ends "opens in a new tab"; a link to a page inside the app is plain and stays where it is. The source column shortens long hosts with an ellipsis and keeps the whole host in a title. Hovering or focusing a title opens a Hover Card with a typed preview (the title, two lines about it and who saved it); Escape closes it. A screen that can't hover has no preview, so there the same two lines sit under the title, and below the medium breakpoint the host and who saved it move under the title too. The kind is a Badge and the person an Avatar with initials. It's built from Hover Card, Badge, Avatar and Guides, with a CSS entrance only. For reading lists, bookmark managers, resource directories and any table of links.
FAQ
How does it tell an outside link from one inside the app?
Each link has an external flag in its data. An outside link gets target="_blank", rel="noopener noreferrer", the arrow (hidden from assistive technology) and an accessible name that ends ", opens in a new tab". An inside link is a plain anchor; in this demo its press says what it would open and goes nowhere. The title link is an a inside a HoverCardTrigger with asChild.
When does the preview card show, and can a keyboard reach it?
It opens when a title is hovered and also when it takes focus, and Escape closes it while the title keeps focus. The card holds only text, so nothing in it needs a Tab stop; the same facts are in the row. The library opens it on focus by itself.
What about phones and touch screens?
A finger can't hover, so a screen with no hover shows the two preview lines under each title, at any width (@media (hover: none)). Below the medium breakpoint the host and who saved it move under the title as well, and the Source and Saved by columns go.
What happens to a long host or title?
Both are cut with an ellipsis in a fixed-layout table, so a row never grows. The source cell keeps the whole host in its title, and the title link's full name is read by screen readers whatever is cut. Hosts keep their left-to-right direction in a right-to-left page.
Where do the links go?
Nowhere real: every address is a reserved .example host or #, so nothing opens from the demo. Replace href and host in LINKS with your own and set external for anything that leaves your app.
What stays local?
The five links and their previews are typed in LINKS, and the polite line only reports what an inside link would open. Nothing is fetched: to preview real pages, load the summary on your server and pass it in as data, since a preview that fetches on hover is slow and hard to announce.