Link Preview
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { LinkPreview } from "@corew500/ui/link-preview"
<LinkPreview>Content</LinkPreview>Variants
linkPreviewVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultsubtle | default |
API Reference
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 | — |
Accessibility
Keyboard Navigation
- Keyboard accessible: preview shows on focus, not just hover
Screen Readers
- Preview popup is associated via `aria-describedby` (handled by Base UI PreviewCard)
- For links where the text alone is insufficient, provide `aria-label` for additional context: `<LinkPreview href="/pricing" aria-label="View pricing plans">Pricing</LinkPreview>`
Additional
- - Uses semantic anchor element for proper link behavior
- Respects user motion preferences via Framer Motion
Localization
Translatable Content
- - Link text and preview content should be pre-translated
- Preview title and description accept localized strings