Preview Card

For sighted users to preview content available behind a link.

Preview Card

Installation

pnpm dlx stera-ui@latest add preview-card

Composition

Use the following composition to build a PreviewCard:

PreviewCard
├── PreviewCardTrigger
└── PreviewCardContent

Sides

Top Right Bottom Left

Preview Card Sides

Side	Description
`top`	Above the trigger
`right`	Right of the trigger
`bottom`	Below the trigger (default)
`left`	Left of the trigger

Delay

Default Fast open, slow close

Preview Card Delay

Use delay and closeDelay on PreviewCardTrigger to control when the card opens and closes.

API Reference

Built on Base UI's Preview Card primitive — see the full API reference there.

PreviewCard

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	—
`onOpenChange`	`(open: boolean) => void`	—

PreviewCardTrigger

Prop	Type	Default
`delay`	`number`	`600`
`closeDelay`	`number`	`300`
`render`	`ReactElement`	—

PreviewCardContent

Prop	Type	Default
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`
`align`	`"start" \| "center" \| "end"`	`"center"`
`sideOffset`	`number`	`4`
`alignOffset`	`number`	`4`