Preview Card

A popup that appears when a link is hovered, showing a preview for sighted users.

The principles of good typography remain into the digital age.

import * as React from 'react';
import { PreviewCard } from '@base-ui-components/react/preview-card';
import styles from './index.module.css';

export default function ExamplePreviewCard() {
  return (
    <PreviewCard.Root>
      <p className={styles.Paragraph}>
        The principles of good{' '}
        <PreviewCard.Trigger
          className={styles.Link}
          href="https://en.wikipedia.org/wiki/Typography"
        >
          typography
        </PreviewCard.Trigger>{' '}
        remain into the digital age.
      </p>

      <PreviewCard.Portal>
        <PreviewCard.Positioner sideOffset={8}>
          <PreviewCard.Popup className={styles.Popup}>
            <PreviewCard.Arrow className={styles.Arrow}>
              <ArrowSvg />
            </PreviewCard.Arrow>
            <img
              width="448"
              height="300"
              className={styles.Image}
              src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
              alt="Station Hofplein signage in Rotterdam, Netherlands"
            />
            <p className={styles.Summary}>
              <strong>Typography</strong> is the art and science of arranging type to
              make written language clear, visually appealing, and effective in
              communication.
            </p>
          </PreviewCard.Popup>
        </PreviewCard.Positioner>
      </PreviewCard.Portal>
    </PreviewCard.Root>
  );
}

function ArrowSvg(props: React.ComponentProps<'svg'>) {
  return (
    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
      <path
        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
        className={styles.ArrowFill}
      />
      <path
        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
        className={styles.ArrowOuterStroke}
      />
      <path
        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
        className={styles.ArrowInnerStroke}
      />
    </svg>
  );
}

API reference

Import the component and place its parts the following way:

Anatomy

import { PreviewCard } from '@base-ui-components/react/previewCard';

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

Root

Groups all parts of the preview card. Doesn’t render its own HTML element.

Prop	Type	Default
`closeDelay`	`number`	`300`
`defaultOpen`	`boolean`	`false`
`delay`	`number`	`600`
`onOpenChange`	`(open, event, reason) => void`	`undefined`
`open`	`boolean`	`undefined`

Trigger

A link that opens the preview card. Renders an <a> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Portal

A portal element that moves the popup to a different part of the DOM. By default, the portal element is appended to the <body>.

Prop	Type	Default
`container`	`React.Ref \| HTMLElement \| null`	`undefined`
`keepMounted`	`boolean`	`false`

Backdrop

An overlay displayed beneath the popup. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`keepMounted`	`boolean`	`false`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Positioner

Positions the popup against the trigger. Renders a <div> element.

Prop	Type	Default
`align`	`'start' \| 'center' \| 'end'`	`'center'`
`alignOffset`	`number`	`0`
`anchor`	`\| React.Ref \| Element \| VirtualElement \| (() => Element \| VirtualElement \| null) \| null`	`undefined`
`arrowPadding`	`number`	`5`
`className`	`string \| (state) => string`	`undefined`
`collisionBoundary`	`\| 'clippingAncestors' \| Element \| Element[] \| Rect`	`'clipping-ancestors'`
`collisionPadding`	`number \| Rect`	`5`
`keepMounted`	`boolean`	`false`
`positionMethod`	`'absolute' \| 'fixed'`	`'absolute'`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`
`side`	`\| 'bottom' \| 'inline-end' \| 'inline-start' \| 'left' \| 'right' \| 'top'`	`'bottom'`
`sideOffset`	`number`	`0`
`sticky`	`boolean`	`false`

CSS Variable	Type
`--anchor-height`	`number`
`--anchor-width`	`number`
`--available-height`	`number`
`--available-width`	`number`
`--transform-origin`	`string`

A container for the preview card contents. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Arrow

Displays an element positioned against the preview card anchor. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`