edbnedbn/ui
ComponentsMapsAudioPDF
GitHub stars
Explorer
Get Started
Components

Preview Card

Link preview card with rich content and auto-positioning on hover.

Componentsdocsbase-ui/preview-card↗

Installation

pnpm dlx edbn-ui@latest add preview-card

Manual

1

Create a file and paste the following code into it.

API Reference

Root

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

defaultOpenboolean
=false

Initial open state

openboolean

Controlled open state

onOpenChange(open: boolean, details: PreviewCard.Root.ChangeEventDetails) => void

Called when the preview card opens or closes

onOpenChangeComplete(open: boolean) => void

Called after animation completes

actionsRefRefObject<PreviewCard.Root.Actions | null>

Imperative close and unmount actions

handlePreviewCard.Handle<Payload>

Handle for detached triggers

defaultTriggerIdstring | null

Initial associated trigger id

triggerIdstring | null

Controlled associated trigger id

childrenReactNode | PayloadChildRenderFunction<Payload>

Preview content or payload-aware render child

Trigger

An element that opens the preview card on hover. Renders an a element.

handlePreviewCard.Handle<Payload>

Associates this trigger with a detached root

payloadPayload

Payload passed to a render-child root

delaynumber
=600

Delay before hover/focus open in milliseconds

closeDelaynumber
=300

Delay before closing after pointer leaves

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Trigger data attributes
AttributeDescription
data-popup-openPresent when card is open

Portal

Moves the popup to a different part of the DOM. Renders a div element.

containerHTMLElement | ShadowRoot | RefObject | null

Portal container

keepMountedboolean
=false

Keep in DOM when closed

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop

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

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Backdrop data attributes
AttributeDescription
data-openPresent when card is open
data-closedPresent when card is closed
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out

Positioner

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

sideSide
='bottom'

Side relative to anchor

sideOffsetnumber | OffsetFunction
=0

Distance from anchor

alignOffsetnumber | OffsetFunction
=0

Offset along the alignment axis

arrowPaddingnumber
=5

Minimum arrow distance from popup edges

anchorElement | VirtualElement | RefObject | function | null

Custom positioning anchor

collisionAvoidanceCollisionAvoidance

Flip, shift, or disable collision handling

collisionBoundaryBoundary
='clipping-ancestors'

Boundary used for collision detection

collisionPaddingPadding
=5

Space from the collision boundary

disableAnchorTrackingboolean
=false

Disable tracking layout shifts of the anchor

stickyboolean
=false

Keep visible after the anchor scrolls away

positionMethod'absolute' | 'fixed'
='absolute'

CSS positioning strategy

align'start' | 'center' | 'end'
='center'

Alignment relative to side

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Positioner data attributes
AttributeDescription
data-openPresent when popup is open
data-closedPresent when popup is closed
data-anchor-hiddenPresent when the anchor is hidden
data-sideSide popup is positioned on
data-alignAlignment relative to side
Positioner CSS variables
VariableDescription
--anchor-heightAnchor height
--anchor-widthAnchor width
--available-heightAvailable height between anchor and viewport edge
--available-widthAvailable width between anchor and viewport edge
--transform-originTransform origin for anchored animations

Popup

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

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Popup data attributes
AttributeDescription
data-openPresent when card is open
data-closedPresent when card is closed
data-alignAlignment relative to side
data-instantPresent when animations should be skipped
data-sideSide popup is positioned on
data-starting-stylePresent when animating in
data-ending-stylePresent when animating out
Popup CSS variables
VariableDescription
--popup-heightCurrent popup height
--popup-widthCurrent popup width

Arrow

Displays an arrow element positioned against the anchor. Renders a div element.

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Arrow data attributes
AttributeDescription
data-openPresent when card is open
data-closedPresent when card is closed
data-uncenteredPresent when the arrow cannot be centered
data-alignAlignment relative to side
data-sideSide popup is positioned on

Viewport

A viewport for animating content transitions between trigger payloads. Renders a div element.

childrenReactNode

Content to render inside the transition container

classNamestring | function

CSS class name

styleCSSProperties | function

Inline style or state-based style function

renderReactElement | function

Custom render function

Viewport data attributes
AttributeDescription
data-activation-directionDirection from the previous trigger to the new trigger
data-currentApplied to the current content container
data-instantPresent when animations should be skipped
data-previousApplied to the exiting content container
data-transitioningPresent while content is transitioning
Viewport CSS variables
VariableDescription
--popup-heightParent popup height for transition containers
--popup-widthParent popup width for transition containers

Handle

Base UI handle utility for detached triggers and imperative preview card control.

isOpenboolean
=readonly

Whether the associated preview card is open

open(triggerId: string) => void
=method

Open and associate the preview card with a trigger id

close() => void
=method

Close the associated preview card

createHandle

Function exported as createPreviewCardHandle for creating typed detached-trigger handles.

returnPreviewCard.Handle<Payload>

A new imperative preview card handle