ComponentsUpdated Sep 9, 2026

Preview Card

A hover card for inline links. The trigger is an anchor inside running text; the card opens after a short delay.

Import

Source: packages/ui/src/components/preview-card

tsx

import { PreviewCard } from '@highlight/ui'

Basic

In the launch retro, the team agreed to move the release date and split the migration into two steps.

tsx

import { PreviewCard } from '@highlight/ui'

export default function PreviewCardBasic() {
  return (
    <PreviewCard>
      <p className="text-foreground/70 max-w-sm text-sm">
        In the <PreviewCard.Trigger href="#">launch retro</PreviewCard.Trigger>, the team agreed to move the release
        date and split the migration into two steps.
      </p>
      <PreviewCard.Content className="w-72">
        <p className="text-foreground text-sm font-medium">Launch retro</p>
        <p className="text-foreground/60 mt-1 text-xs">Tue, Sep 2 · 45 min · 6 attendees</p>
        <p className="text-foreground/70 mt-2 text-sm">Three decisions, two open questions.</p>
      </PreviewCard.Content>
    </PreviewCard>
  )
}

With icon

icon renders inline before the link text.

Follow-up posted in #design-crit.

tsx

import { MessageSquareText } from 'lucide-react'
import { PreviewCard } from '@highlight/ui'

export default function PreviewCardIcon() {
  return (
    <PreviewCard>
      <p className="text-foreground/70 max-w-sm text-sm">
        Follow-up posted in{' '}
        <PreviewCard.Trigger href="#" icon={<MessageSquareText />}>
          #design-crit
        </PreviewCard.Trigger>
        .
      </p>
      <PreviewCard.Content className="w-72">
        <p className="text-foreground text-sm font-medium">#design-crit</p>
        <p className="text-foreground/70 mt-1 text-sm">Weekly critique thread. 14 replies.</p>
      </PreviewCard.Content>
    </PreviewCard>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

PreviewCard.Trigger: Anchor; href, icon, delay (default 400ms).
PreviewCard.Content: Portal + Backdrop + Positioner + Popup. sideOffset, showBackdrop, positionerProps.