Overlays & Drawers

Accessible overlay mechanics: slide-over sheets, bottom action drawers, and modal command palettes.

On This Page

Accessible overlay mechanics: slide-over sheets, bottom action drawers, and modal command palettes.

Overlays Suite

Accessible viewport overlay mechanics: slide-over sheets, bottom action drawers, and modal command palettes with keyboard event traps.

npx nexoreui add premium-overlays

Directional slide-in container supporting bottom sheets for mobile and right sidebars for desktop.

component.tsx

Prop	Type	Default	Description
open*	boolean	`false`	Whether the drawer overlay is visible.
onClose*	() => void	`—`	Callback triggered when clicking backdrop or close trigger.
side	'bottom' \| 'right' \| 'left'	`'bottom'`	Direction the drawer slides in from.
title	string	`—`	Header title string.

Searchable action modal with grouping, keyboard arrow navigation, and instant callback execution.

component.tsx

Focus Trap: Focus is contained within active overlay sheets and returned to trigger elements upon dismissal.
Escape Key: Overlays automatically dismiss when pressing Escape.

On This Page