Preview Card

A high-quality, styled React preview card component built with @base-ui/react that displays a preview card when hovering a link.

The PreviewCard component provides a floating summary popup when hovering over hyperlinked trigger elements.

Usage

import { PreviewCard } from "@/components/ui/preview-card";

export function ExamplePreviewCard() {
  return (
    <p>
      Learn more about{" "}
      <PreviewCard.Root>
        <PreviewCard.Trigger href="https://wikipedia.org/wiki/Typography">
          Typography
        </PreviewCard.Trigger>
        <PreviewCard.Portal>
          <PreviewCard.Positioner sideOffset={8}>
            <PreviewCard.Popup>
              <h4>Typography</h4>
              <p>The art and technique of arranging type.</p>
            </PreviewCard.Popup>
          </PreviewCard.Positioner>
        </PreviewCard.Portal>
      </PreviewCard.Root>
    </p>
  );
}

Preview

The principles of good Typography remain critical in modern UI design.

Anatomy

import { PreviewCard } from "@base-ui/react/preview-card";

<PreviewCard.Root>
  <PreviewCard.Trigger />
  <PreviewCard.Portal>
    <PreviewCard.Backdrop />
    <PreviewCard.Positioner>
      <PreviewCard.Popup>
        <PreviewCard.Arrow />
      </PreviewCard.Popup>
    </PreviewCard.Positioner>
  </PreviewCard.Portal>
</PreviewCard.Root>;

API Reference

PreviewCard.Root Props

Prop	Type	Default	Description
`open`	`boolean`	`undefined`	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial uncontrolled open state.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback fired when open state changes.
`delay`	`number`	`undefined`	Delay in ms before opening on hover.

PreviewCard.Positioner Props

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Preferred placement side relative to trigger link.
`sideOffset`	`number`	`8`	Distance in pixels from trigger element.