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

API Reference

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