Get Started GitHub

Floating UI is a low-level toolkit to create floating elements. Tooltips, popovers, dropdowns, menus, and more.

Placement

Places your floating element relative to another one.

Click the dots
CodeSandbox

Shift

Shifts your floating element to keep it in view.

Scroll the container
CodeSandbox

Flip

Changes the placement of your floating element to keep it in view.

Scroll the container
CodeSandbox

Size

Changes the size of your floating element to keep it in view.

Scroll the container
CodeSandbox

Arrow

Dynamically positions an arrow element that is center-aware.

Scroll the container
CodeSandbox

Virtual

Anchor relative to any coordinates, such as your mouse cursor.

Move your mouse
Tooltip
CodeSandbox

Light as a feather.

The core is only 600 bytes when minified and compressed with Brotli. Plus, the architecture is super modular, so tree-shaking works like a charm.

computePosition()0.6 kB
shift()+0.6 kB
limitShift()+0.2 kB
flip()+0.5 kB
hide()+0.2 kB
offset()+0.1 kB
autoPlacement()+0.4 kB
size()+0.3 kB
inline()+0.6 kB
DOM platform+1.9 kB

Support Floating UI's future.

Ongoing work is making Floating UI the best, 100% free solution in this space. We are proudly sponsored by the following organizations, consider joining them on Open Collective!

Usetiful

User onboarding and product adoption made simple

Modern Treasury

The one place to keep a business’s money flowing

Mobile Mall - Mobile Phone Prices in PakistanCoupontoaster - Discount and Coupon CodesCell Tracking Apps - Parental Control Software Review Websitewazirx referral codedpcoupon - coupon codes and discountsggc - espionner un téléphone Android iPhone Pour Control ParentalLiving FeedsBest Android Apps, Downloads & How to GuidesTitan Asset ManagementDailycontributors BlogAriakit - Toolkit for building accessible UIs

Ready to install?

Start playing via your package manager or CDN.

Package Manager

Install with npm, Yarn, or pnpm.

Get started

CDN

Install with the jsDelivr CDN.

Get started