Docs

Floating UI
Plus

Build interfaces ready for your product that work consistently in Web Components and Vue.

← All patterns

Middleware

See how offset, shift, flip, size, arrow, hide, inline, and auto-placement cooperate.

Live demoweb-components
01

Offset

(DOC)

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

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

Shift

(DOC)

Scroll horizontally. The panel stays on top and shifts along the x-axis to remain visible.

scroll horizontally
shift({padding: 8})
03

Flip

(DOC)

Scroll up. Flip chooses the available side while shift keeps the panel inside the boundary.

scroll up
bottom (default) + flip() → shift()
04

Arrow

(DOC)

Scroll horizontally. Floating UI Plus adds the arrow height to the requested visual gap.

scroll horizontally
offset(GAP) → shift() → arrow({element})
05

Size

(DOC)

Scroll vertically. Available height constrains the panel without adding a second popup scrollbar.

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

Auto placement

(DOC)

Scroll vertically. Auto placement chooses the roomiest side while shift keeps it inside the boundary.

scroll vertically
autoPlacement({padding: 8}) → shift({padding: 8})
07

Hide

(DOC)

Scroll up. The panel dims after escaping, then hides when its reference is fully clipped.

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

Inline

(DOC)

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

without

Text beforea reference that wraps over multiple linesafter.

with inline()

Text beforea reference that wraps over multiple linesafter.

inline() → offset(8)