Overlays

Preview Card

Non-modal progressive enhancement presenting supplementary preview content.

idle

Usage

import {
	PreviewCard,
	PreviewCardPopup,
	PreviewCardTrigger,
} from "@mizen-labs/ui";

The parts and how they nest, taken from the preview above.

<PreviewCard>
	<PreviewCardTrigger />
	<PreviewCardPopup />
</PreviewCard>

A custom popup element that stays mounted.

Hover intent and pointer travel into the card.

Guidance	Practice
Do	Show supplementary context for a linked resource. Keep the destination understandable without the preview.

Guidance	Boundary
Scope	Do not put required actions or instructions only in a hover preview. Use Popover for explicit interaction.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`PreviewCard`	`PreviewCardProps<Payload>`	`—`	Root for hover or focus previews.
`PreviewCardTrigger`	`PreviewCardTriggerProps<Payload>`	`—`	Native link trigger with render, delay, and closeDelay.
`PreviewCardPopup`	`PreviewCardPopupProps`	`—`	Native popup with render, align, sideOffset, anchor, and portalProps.
`delay`	`number`	`600`	Trigger hover delay in milliseconds. Keyboard focus opens immediately.
`closeDelay`	`number`	`300`	Trigger close delay in milliseconds.
`align`	`"start" \| "center" \| "end"`	`center`	Alignment relative to the trigger.
`sideOffset`	`number`	`4`	Distance from the trigger in pixels.
`portalProps`	`PreviewCardPrimitive.Portal.Props`	`—`	Native portal props including container and keepMounted.
`PreviewCardPrimitive`	`Base UI PreviewCard`	`—`	Native parts for custom composition.