floating-ui-plus / web components

Floating UI
PlusWeb Components

Custom elements for precise positioning and dependable
keyboard, pointer, and focus interactions.

LIVE SIGNAL07Interactive components

Frameworks All examples Tooltip Popover Menu Nested menu Cursor Combobox Placement Middleware Modal

← All Web Components examples

modal route

Focus has
a boundary.

02 / contain

A modal should
make space.

Open this one to feel the shared focus trap, inert neighbors, Escape dismissal, and focus restoration.

FOCUS ROOM / PRIVATE

You are inside
the focus trap.

Nested surfaces keep their own dismissal step. Escape closes the topmost surface before this room.

This tooltip stays inside the dialog.

NESTED PORTALDetails stay above the dialog.

Escape and outside press dismiss only this panel first.

SECOND LAYER

One more
focus boundary.

Close this layer to resume the parent dialog.

ESC closes the top layer

floating-ui-plus@floating-ui-plus/web-componentsChoose an example route