Motion UIComponentsComponent

Overlay

Focus trap, scroll lock and dimming backdrop primitives for modals, sheets and palettes.

API reference

Components

`<Backdrop />`

Dimming scrim behind an open overlay.

`opacity?`

number | MotionValue<number>

Scrim opacity as a number or bound MotionValue.

`onClick?`

() => void

Click-to-dismiss handler.

`label?`

string

When set, renders as a labelled dismiss button.

`className?`

string

Scrim surface class. Default bg-black.

`style?`

MotionStyle

Extra inline styles.

`children?`

ReactNode

Content inside the scrim.

Hooks

`useFocusTrap`

Trap keyboard focus inside an open overlay.

useFocusTrap(options: FocusTrapOptions): void

`active`

boolean

Whether the trap is engaged.

`container`

RefObject<HTMLElement | null>

Ref to the overlay panel.

`onEscape?`

() => void

Called when Escape is pressed.

`initialFocus?`

RefObject<HTMLElement | null>

Element focused when the trap engages.

`restoreFocus?`

boolean = true

Restore focus to the trigger on close. Default true.

`useScrollLock`

Freeze background scroll while active.

useScrollLock(active: boolean): void

Functions

`getFocusableElements`

Tabbable descendants of container in document order.

getFocusableElements(container: HTMLElement | null): HTMLElement[]

Featured in

See the overlay composed into full sections.

Navigation: Mega menuAn example of a site navigation with a single shared mega-menu panel that morphs directionally between sections, in Motion for React.