floating-ui-plus / web components

Floating UI
PlusWeb Components

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

LIVE SIGNAL07Interactive components
← All Web Components examples
middleware lab

Position with
intent.

Each card keeps one or more <floating-root open>elements inspectable.

01

offset

(DOC)

Compare the default position with a 10px gutter on the main axis.

0px
Floating
10px
Floating
offset(0) / offset(10)
02

shift

(DOC)

Scroll horizontally. The panel shifts to remain visible.

scroll horizontally
Still on top
shift({padding: 8})
03

flip

(DOC)

Scroll up. The preferred bottom placement flips when space changes.

scroll up
Final placement
placement="bottom" + flip()
04

arrow

(DOC)

Scroll horizontally. The arrow targets the reference center.

scroll horizontally
Floating
shift() → arrow({element})
05

size

(DOC)

Available height constrains the panel while content remains scrollable.

scroll vertically
Floating contentOneTwoThreeFourFive
size({apply: set maxWidth / maxHeight})
06

autoPlacement

(DOC)

The panel continuously chooses the side with the most space.

scroll vertically
Final placement
autoPlacement({padding: 8})
07

hide

(DOC)

The panel dims after escaping, then hides with its clipped reference.

scroll up
Floating
State: attached
hide() + hide({strategy: 'escaped'})
08

inline

(DOC)

Compare a bounding box with the relevant client rect of an inline anchor.

without

Text beforea reference that wraps over multiple linesafter.

Bounding box
with inline()

Text beforea reference that wraps over multiple linesafter.

Client rect
inline() → offset(8)