Preview Card

Preview Cards are visual-only interactive floating elements that display a concise preview of a link's contents when a user hovers over it before navigating through.

PreviewCardArrow API

Import

import * as PreviewCard from '@base_ui/react/PreviewCard';
const PreviewCardArrow = PreviewCard.Arrow;

Props

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
hideWhenUncentered	bool	false	Whether the `Arrow` is hidden when it can't point to the center of the anchor element.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PreviewCardArrow to change the default props of this component with the theme.

PreviewCardBackdrop API

Import

import * as PreviewCard from '@base_ui/react/PreviewCard';
const PreviewCardBackdrop = PreviewCard.Backdrop;

Props

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
container	HTML element \| func	-	The element the `Backdrop` is appended to.
keepMounted	bool	false	Whether the `Backdrop` remains mounted when the Preview Card `Popup` is closed.
render	element \| func	-	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PreviewCardBackdrop to change the default props of this component with the theme.

import * as PreviewCard from '@base_ui/react/PreviewCard';
const PreviewCardPopup = PreviewCard.Popup;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PreviewCardPopup to change the default props of this component with the theme.

PreviewCardPositioner API

Import

import * as PreviewCard from '@base_ui/react/PreviewCard';
const PreviewCardPositioner = PreviewCard.Positioner;

Props

Props of the native component are also available.

Name	Type	Default	Description
alignment	'center' \| 'end' \| 'start'	'center'	The alignment of the preview card element to the anchor element along its cross axis.
alignmentOffset	number	0	The offset of the preview card element along its alignment axis.
anchor	HTML element \| object \| func	-	The anchor element to which the preview card popup will be placed at.
arrowPadding	number	5	Determines the padding between the arrow and the preview card popup's edges. Useful when the preview card popup has rounded corners via `border-radius`.
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
collisionBoundary	HTML element \| Array<HTML element> \| string \| { height?: number, width?: number, x?: number, y?: number }	'clippingAncestors'	The boundary that the preview card element should be constrained to.
collisionPadding	number \| { bottom?: number, left?: number, right?: number, top?: number }	5	The padding of the collision boundary.
container	HTML element \| func	-	The container element to which the preview card popup will be appended to.
hideWhenDetached	bool	false	If `true`, the preview card will be hidden if it is detached from its anchor element due to differing clipping contexts.
keepMounted	bool	false	If `true`, preview card stays mounted in the DOM when closed.
positionStrategy	'absolute' \| 'fixed'	'absolute'	The CSS position strategy for positioning the preview card popup element.
render	element \| func	-	A function to customize rendering of the component.
side	'bottom' \| 'left' \| 'right' \| 'top'	'bottom'	The side of the anchor element that the preview card element should align to.
sideOffset	number	0	The gap between the anchor element and the preview card element.
sticky	bool	false	If `true`, allow the preview card to remain in stuck view while the anchor element is scrolled out of view.

The ref is forwarded to the root element.

Theme default props

You can use PreviewCardPositioner to change the default props of this component with the theme.

PreviewCardRoot API

Import

import * as PreviewCard from '@base_ui/react/PreviewCard';
const PreviewCardRoot = PreviewCard.Root;

Props

Props of the native component are also available.

Name	Type	Default	Description
animated	bool	true	Whether the preview card can animate, adding animation-related attributes and allowing for exit animations to play. Useful to disable in tests to remove async behavior.
closeDelay	number	300	The delay in milliseconds until the preview card popup is closed.
defaultOpen	bool	false	Whether the preview card popup is open by default. Use when uncontrolled.
delay	number	600	The delay in milliseconds until the preview card popup is opened.
delayType	'hover' \| 'rest'	'rest'	The delay type to use when the preview card is triggered by hover. `rest` means the `delay` represents how long the user's cursor must rest on the trigger before the preview card popup is opened. `hover` means the `delay` represents how long to wait as soon as the user's cursor has entered the trigger.
onOpenChange	func	-	Callback fired when the preview card popup is requested to be opened or closed. Use when controlled.
open	bool	false	Whether the preview card popup is open. Use when controlled.

The component cannot hold a ref.

PreviewCardTrigger API

Import

import * as PreviewCard from '@base_ui/react/PreviewCard';
const PreviewCardTrigger = PreviewCard.Trigger;

Props

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

Theme default props

You can use PreviewCardTrigger to change the default props of this component with the theme.