PreviewCard

A card that opens while the pointer rests on its trigger, usually a link, drawn like a popover. It previews what the link leads to without leaving the page.

import { PreviewCard } from '@basmilius/react-ui';

import { PreviewCard } from '@basmilius/react-ui';

export default function PreviewCardDemo() {
    return (
        <p className="max-w-md text-sm text-text-muted">
            The fix landed in{' '}
            <PreviewCard.Root>
                <PreviewCard.Trigger href="https://github.com/basmilius/react-ui" className="font-medium text-accent underline">
                    #128
                </PreviewCard.Trigger>
                <PreviewCard.Popup className="w-72 p-3">
                    <p className="text-sm font-medium text-text">Keep a nested dialog above its parent</p>
                    <p className="mt-1 text-xs text-text-muted">Merged two days ago, 3 files changed.</p>
                </PreviewCard.Popup>
            </PreviewCard.Root>{' '}
            after a week of review.
        </p>
    );
}

Parts

Part	What it is
PreviewCard.Root	Holds the open state, and the delays before it opens and closes.
PreviewCard.Trigger	The link the card belongs to. It renders an <a>.
PreviewCard.Popup	The portal, the positioner and the card, with the same variant and placement props as Popover.Popup.

Treat the card as extra. It opens for the pointer, so keep anything a person needs on the page or behind the link itself.

PreviewCardPopupProps is an exported type.