Preview Card

A preview card reveals a floating panel of supplementary content when the user hovers or focuses a trigger. Use it for link previews, profile cards, or any rich hover tooltip; for plain text on hover, use Tooltip instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/preview-card

Usage

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

<PreviewCard>
  <PreviewCardTrigger />
  <PreviewCardContent />
</PreviewCard>

Composition

PreviewCard
├── PreviewCardTrigger
└── PreviewCardContent

PreviewCardContent composes the portal, positioner, popup, and arrow internally. Set arrow={false} to hide the pointer.

Examples

Simple

A minimal card with text content.

Product Preview

Render rich content like an image and price inside PreviewCardContent.

Text Trigger

Wrap an inline <span> in PreviewCardTrigger to anchor the card to text.

Inline (wrapping text)

When the trigger phrase wraps across lines, the card anchors to the line box under the pointer rather than the full bounding box, and it works with no extra props.

API Reference

The PreviewCard component is built on top of Base UI's PreviewCard. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI PreviewCard documentation.

Custom Props

PreviewCardContent

Modified Defaults

Our implementation changes the following Base UI prop defaults:

• PreviewCardTrigger: delay defaults to 0 (Base UI defaults to 600)
• PreviewCardTrigger: closeDelay defaults to 0 (Base UI defaults to 300)
• PreviewCardContent: align defaults to "center" (Base UI defaults to "start")
• PreviewCardContent: sideOffset defaults to 8 (Base UI defaults to 0)