Preview Card

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>

Examples

Simple

Minimal preview card with basic content.

Product Preview

Display product information in preview card.

Design System

Text Trigger

Trigger preview from inline text.

Hover for more info

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

Prop

Type

Default

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)

Preview