XDS — Design System

useXDSLayer@xds/core v0.0.13 · useXDSLayer

Usage

Layer is a core positioning hook for rendering overlay content using CSS Anchor Positioning and the Popover API. Use it as the foundation for building popovers, hover cards, and tooltips without React portals.

ts
import {useXDSLayer} from '@xds/core/Layer'

Best practices

Guidance	Practices
Do	Use context mode for anchor-positioned overlays relative to a trigger element, and fixed mode for manually positioned overlays at specific coordinates.
Do	Build on higher-level components like Popover, HoverCard, and Tooltip instead of using Layer directly for common overlay patterns.
Don't	Implement ARIA patterns directly in a Layer — leave accessibility semantics to the higher-level components that build on it.