Preview Link Card

Read the Space UI Docs — hover to preview, click to dive in.

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/primitives-preview-link-card

pnpm dlx shadcn@latest add @spaceui/primitives-preview-link-card

Usage

Code

import {
  PreviewLinkCard,
  PreviewLinkCardImage,
  PreviewLinkCardPopup,
  PreviewLinkCardPortal,
  PreviewLinkCardPositioner,
  PreviewLinkCardTrigger,
} from '@/components/ui/preview-link-card'

Code

<PreviewLinkCard href="https://www.spaceui.one/docs">
  <PreviewLinkCardTrigger>Space UI Docs</PreviewLinkCardTrigger>
  <PreviewLinkCardPortal>
    <PreviewLinkCardPositioner>
      <PreviewLinkCardPopup>
        <PreviewLinkCardImage alt="Preview link card content" />
      </PreviewLinkCardPopup>
    </PreviewLinkCardPositioner>
  </PreviewLinkCardPortal>
</PreviewLinkCard>

Credits

Built with @base-ui/react
Inspired by Aceternity UI Link Preview

API Reference

PreviewLinkCard Props

Prop	Type	Default	Description
`href`	string	required	Target URL for the link
`src`	string	-	Preview image source URL
`width`	number	-	Width of the preview image
`height`	number	-	Height of the preview image
`deviceScaleFactor`	number	1	Device scale factor for rendering
`colorScheme`	light\|dark	light	Color scheme preference
`followCursor`	boolean\|x\|y	false	Makes preview popup follow cursor movement
`followCursorSpringOptions`	SpringOptions	{ stiffness: 200, damping: 17 }	Physics configuration for cursor following

PreviewLinkCardTrigger Props

Triggers the preview link popup when hovered. Renders as native <a> tag with standard anchor attributes.

PreviewLinkCardPopup Props

Prop	Type	Default	Description
`transition`	Transition	{ type: 'spring', stiffness: 300, damping: 25 }	Animation spring transition for the popup

PreviewLinkCardImage Props

Prop	Type	Default	Description
`alt`	string	preview image	Alternative text for preview