Preview Card

A card that appears on hover to preview linked content.

Newoverlaydisplay

Loading preview...

Installation

npx baseui-cn add preview-card

Usage

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

<PreviewCard>
  <PreviewCardTrigger href="https://example.com">Hover me</PreviewCardTrigger>
  <PreviewCardContent>
    <p>Preview content here.</p>
  </PreviewCardContent>
</PreviewCard>

Examples

Basic

A simple preview card with text content.

Loading preview...

Placement

Use the side prop on PreviewCardContent to control placement: top, right, bottom (default).

Loading preview...

API

PreviewCardContent

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the trigger the card opens on
`sideOffset`	`number`	`4`	Distance in px between the card and the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger
`alignOffset`	`number`	`4`	Offset in px along the alignment axis

positionerProps forwards native Base UI Positioner options, including anchor, collision boundaries/padding, positioning method and refs. Options supplied there override the convenience positioning props above.

API Reference

See the Base UI PreviewCard documentation for the full API reference, including all props, data attributes, and CSS classes.