Loading…

Preview Link Card

beta

An inline link that previews its destination on hover or focus: the image wipes in from a shimmer while settling from a slight zoom, and the text lines rise in after it.

Overlays
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs hover-card as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add preview-link-card

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { PreviewLinkCard } from "@/components/ui/preview-link-card";

Examples

Every example the tests run, live and operable, side by side.

Default
In Prose
Image Only
Broken Image

API

Generated from the component's own types, so a prop cannot appear here without existing.

<PreviewLinkCard>

Prop	Type	Default
`href` (required) The link's destination. Its hostname is shown on the card.	`string`	—
`image` (required) The preview image's URL. Supply it yourself — nothing is fetched or screenshotted.	`string`	—
`align`	`"start" \| "center" \| "end"`	`"center"`
`cardClassName` Classes for the card.	`string`	—
`closeDelay` Milliseconds before it closes once the pointer leaves.	`number`	—
`defaultOpen`	`boolean`	—
`description` A line or two about the page.	`ReactNode`	—
`heading` A heading on the card, such as the page's title.	`ReactNode`	—
`imageAlt` Alt text for the image. Empty by default: the image previews the link, which already names it.	`string`	`""`
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`openDelay` Milliseconds of hover before the card opens.	`number`	—
`side` Which side of the link the card opens on.	`"top" \| "right" \| "bottom" \| "left"`	`"top"`
`size`	`"sm" \| "md" \| "lg"`	`"md"`

Plus every attribute of <a>.

Accessibility

The trigger is a plain <a href>: it navigates, sits in the tab order, and keyboard focus opens the card exactly as hovering does (Radix HoverCard); Escape closes it. The card is a visual preview only — it is not announced and is not focusable — so the link text must say where it goes. The image has empty alt text by default because it previews a destination the link already names; pass imageAlt when it carries information of its own. The shimmer is aria-hidden. No network requests are made beyond loading the image you supply. The reveal, shimmer and stagger stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

href

The link's destination. Its hostname is shown on the card.

string

—

image

The preview image's URL. Supply it yourself — nothing is fetched or screenshotted.

string

—

align

"start" | "center" | "end"

"center"

cardClassName

Classes for the card.

string

—

closeDelay

Milliseconds before it closes once the pointer leaves.

number

—

defaultOpen

boolean

—

description

A line or two about the page.

ReactNode

—

heading

A heading on the card, such as the page's title.

ReactNode

—

imageAlt

Alt text for the image. Empty by default: the image previews the link, which already names it.

string

""

onOpenChange

(open: boolean) => void

—

open

boolean

—

openDelay

Milliseconds of hover before the card opens.

number

—

side

Which side of the link the card opens on.

"top" | "right" | "bottom" | "left"

"top"

size

"sm" | "md" | "lg"

"md"