Preview card

Hover or focus card for links and mentions. Use for lightweight previews — prefer Dialog for dense or interactive content.

Examples

Link preview

@base-ui

Profile

Overview

Preview card opens from a trigger on hover/focus. Compose portal, positioner, and popup. Style the trigger with render for links or buttons.

tsx

import {
  PreviewCard,
  PreviewCardTrigger,
  PreviewCardPortal,
  PreviewCardPositioner,
  PreviewCardPopup,
  PreviewCardArrow,
} from "@standard-ui/react"

<PreviewCard>
  <PreviewCardTrigger render={<a href="…" />}>
    @base-ui
  </PreviewCardTrigger>
  <PreviewCardPortal>
    <PreviewCardPositioner>
      <PreviewCardPopup>
        <PreviewCardArrow />
        …
      </PreviewCardPopup>
    </PreviewCardPositioner>
  </PreviewCardPortal>
</PreviewCard>

Usage

Trigger

Pass an anchor or button through render so semantics stay correct.

tsx

<PreviewCardTrigger
  render={<a href="https://base-ui.com" className="…" />}
>
  @base-ui
</PreviewCardTrigger>

Anatomy

tsx

PreviewCard
  PreviewCardTrigger
  PreviewCardPortal
    PreviewCardPositioner
      PreviewCardPopup
        PreviewCardArrow

API

Part	Role
PreviewCard	Root open state and delays.
PreviewCardTrigger	Hover/focus target. Use render for anchors.
PreviewCardPopup	Preview surface with optional arrow.
createPreviewCardHandle	Detached triggers linked by a shared handle.

Guidelines

Do

Keep preview content skim-able in a glance
Use for mentions, links, and lightweight metadata
Include an arrow when placement might be ambiguous

Don't

Don't put forms or primary actions only in a preview
Don't confuse with Tooltip — tooltips are shorter labels
Don't nest interactive menus inside the card