Preview Card

A rich preview shown when hovering a link. Rises with overlay depth, just like Tooltip and Popover.

tsx

import {
  PreviewCard,
  PreviewCardContent,
  PreviewCardTrigger,
} from "@/registry/seam/ui/preview-card"

export default function PreviewCardDemo() {
  return (
    <p className="text-sm">
      Built on{" "}
      <PreviewCard>
        <PreviewCardTrigger
          render={<a href="https://base-ui.com" className="underline" />}
        >
          Base UI
        </PreviewCardTrigger>
        <PreviewCardContent>
          <div className="space-y-1.5">
            <div className="font-medium">Base UI</div>
            <p className="text-muted-foreground text-sm">
              Unstyled React components from the creators of Radix, Floating UI,
              and Material UI.
            </p>
          </div>
        </PreviewCardContent>
      </PreviewCard>
      .
    </p>
  )
}

bunx --bun @seamui/cli@latest add preview-card

Notes

Opens on hover (after a delay) and on keyboard focus of the trigger link; dismisses on blur and Escape.
Content is non-interactive-safe — the card is a supplement to the link, not a replacement for visiting it.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.