shadcn.io is not affiliated with official shadcn/ui
Shadow Lift Card Grid Features Block for Radix UI
Six whole-card links for an edge-hosting platform in two columns, each with a sentence, a mirroring arrow and a metric row with a sparkline, that lift under a deeper shadow on hover, focus and press.
Installation
Overview
A grid of link cards for React with Radix UI. Six cards stand apart in two columns (one on a phone) under a start-aligned header, each a bordered box with + marks on its corners. A card's whole face is its link, through a link overlay on the title, so the click target is the card and the link has one name. Under the title and a sentence, a metric row shows the figure that backs the claim (38 ms, 96.4%, 2.1 s) with a sparkline of the week behind it. Hovering, focusing the link by keyboard or pressing a card lifts it a few pixels under a deeper shadow and a faint ring, and the arrow nudges toward the link's direction. With reduced motion the card keeps the shadow and the ring and stays put. It's built from Guides and the link overlay, with SVG for the sparklines and your theme's tokens for every colour. For a hosting, infrastructure or analytics product whose features each deserve a page.
FAQ
Where do the links go?
Each card has one link, LinkOverlay on its title, pointing at # for now: change href per feature. The overlay stretches over the whole card, so the card is clickable and keyboard users get a single stop with a name like "A network that is near everyone". There is no second "Learn more" link to repeat.
What does the lift do, and how is it kept accessible?
The card translates up four pixels and gains a shadow and a ring, with a 200 ms transition. It runs on pointer hover, on keyboard focus (when the card contains a focus-visible link) and while the card is pressed, so touch and keyboard see it too. With reduced motion the translate is off and only the shadow and ring change.
How do I change the figures and sparklines?
Edit FEATURES: each has a value, a measure (what it counts) and a trend of eight numbers, oldest first. The sparkline is drawn from the trend by a small pure function, scaled so the lowest value sits at the foot and the highest at the top; the dot marks the latest. The sparkline is decoration and hidden from assistive technology, while the value and its measure are real text.
Does the arrow mirror in right-to-left?
Yes: the arrow flips with rtl:-scale-x-100, and its nudge on hover goes the other way. The figures are in bdi, and the sparkline is dir="ltr" because a week runs in one direction in every language.