LinkPreview
A link component that shows a preview popup on hover with image, title, and description.
Loading...
Basic Usage
import { LinkPreview } from "@corew500/ui"
<LinkPreview
href="https://example.com"
preview={{
image: "/preview.jpg",
title: "Example Website",
description: "A brief description of the link content.",
}}
>
Visit Example
</LinkPreview>Position
// Above the link (default)
<LinkPreview position="top" preview={preview}>Link</LinkPreview>
// Below the link
<LinkPreview position="bottom" preview={preview}>Link</LinkPreview>
// Automatic based on viewport
<LinkPreview position="auto" preview={preview}>Link</LinkPreview>Without Image
<LinkPreview
href="https://example.com"
preview={{
title: "Example Website",
description: "Description only, no image.",
}}
>
Text Link
</LinkPreview>Custom Trigger
<LinkPreview href="https://example.com" preview={preview}>
<Button variant="link">Custom Trigger</Button>
</LinkPreview>In Text
<p>
Check out{" "}
<LinkPreview
href="https://ui.shadcn.com"
preview={{
image: "/shadcn-preview.png",
title: "shadcn/ui",
description: "Beautifully designed components.",
}}
>
shadcn/ui
</LinkPreview>{" "}
for more components.
</p>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href* | string | — | Link destination |
| preview | LinkPreviewData | — | Preview data (image, title, description) |
| side | enum | top | Side of the link to show preview |
| align | enum | center | Alignment relative to the link |
| openDelay | number | 300 | Delay before showing preview (ms) |
| closeDelay | number | 150 | Delay before hiding preview (ms) |
| showOnTouch | enum | false | Whether to show preview on touch devices |
| variant | enum | default | — |
LinkPreviewData Type
interface LinkPreviewData {
image?: string
title: string
description?: string
}Design Tokens
| Token | Description |
|-------|-------------|
| --link-preview-width | Popup width |
| --link-preview-max-height | Maximum popup height |
| --link-preview-image-height | Preview image height |
Accessibility
- Link maintains standard anchor semantics
- Preview popup is supplementary, not required for navigation
- Keyboard users can still follow the link normally