CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="preload" as="image" href="/floating-ui.jpg"/><title>Floating UI - Create tooltips, popovers, dropdowns, and more</title><meta name="next-head-count" content="4"/><meta name="description" content="A JavaScript library to position floating elements and create interactions for them."/><link rel="preload" href="/_next/static/media/968c529aef8f703d-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/_next/static/css/68fbc9c4df46134b.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/68fbc9c4df46134b.css" crossorigin="" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-10311436baca1d61.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/framework-23ba249a37cb5d33.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/main-281c41c0ef7e6ac1.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_app-8f9fdc6884f87be8.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/index-d875950853fa22f9.js" defer="" crossorigin=""></script><script src="/_next/static/ik88V7O7Y4F1xf7scD1a_/_buildManifest.js" defer="" crossorigin=""></script><script src="/_next/static/ik88V7O7Y4F1xf7scD1a_/_ssgManifest.js" defer="" crossorigin=""></script></head><body class="bg-gray-75 text-gray-900 dark:bg-gray-900 dark:text-gray-100" data-remove-transitions=""><div id="__next"><div class="__variable_7d5794"><div data-fade="initial"><header class="font-satoshi relative overflow-hidden bg-gray-900 pb-16"><div class="container mx-auto max-w-screen-xl bg-[#202028] pt-16 text-center"><svg width="140" height="230" viewBox="0 0 300 467" fill="none" xmlns="http://www.w3.org/2000/svg" class="relative z-10 mx-auto animate-float" aria-label="Floating UI logo (a cute smiling red balloon)"><path d="M142 348.5C141 361.167 141.6 390.3 152 405.5C165 424.5 178 456.5 181 464.5" stroke="black" stroke-width="5" stroke-linecap="round" class="animate-string" style="transform-origin:40% 92%"></path><path d="M140.844 339.077C142.001 337.094 144.867 337.094 146.025 339.077L151.297 348.107C152.465 350.107 151.022 352.62 148.706 352.62H138.162C135.846 352.62 134.404 350.107 135.572 348.107L140.844 339.077Z" fill="#AD3A56"></path><path d="M300 161.326C300 251.5 220.707 328.146 143.939 343.13C66.6667 329.145 4.0404 244.736 -1.52588e-05 158.329C1.54128e-07 64.93 76.2185 0 154.04 0C231.862 0 300 63.4316 300 161.326Z" fill="url(#paint0_radial_201_2)"></path><ellipse cx="76.7677" cy="184.801" rx="25.2525" ry="24.9731" fill="#CD0031" fill-opacity="0.5"></ellipse><ellipse cx="214.141" cy="184.801" rx="25.2525" ry="24.9731" fill="#CD0031" fill-opacity="0.4"></ellipse><ellipse cx="191.919" cy="163.823" rx="13.1313" ry="12.986" fill="#222222"></ellipse><ellipse cx="98.9899" cy="163.823" rx="13.1313" ry="12.986" fill="#222222"></ellipse><mask id="mask0_201_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="123" y="180" width="46" height="32"><path d="M123.232 183.805C123.232 182.148 124.575 180.805 126.232 180.805H165.687C167.344 180.805 168.687 182.148 168.687 183.805V208.772C168.687 210.429 167.344 211.772 165.687 211.772H126.232C124.575 211.772 123.232 210.429 123.232 208.772V183.805Z" fill="#C4C4C4"></path></mask><g mask="url(#mask0_201_2)"><path d="M168.687 182.304C168.687 194.717 158.512 204.779 145.96 204.779C133.408 204.779 123.232 194.717 123.232 182.304C123.232 169.891 133.408 159.828 145.96 159.828C158.512 159.828 168.687 169.891 168.687 182.304Z" fill="#222222"></path></g><defs><radialGradient id="paint0_radial_201_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(32.3232 221.761) rotate(-30.6138) scale(283.446 246.147)"><stop stop-color="#FF3767"></stop><stop offset="0.807292" stop-color="#F36D76"></stop><stop offset="1" stop-color="#FFE1DA"></stop></radialGradient></defs></svg><div class="absolute top-[-3rem] w-full overflow-hidden" style="left:50%;transform:translateX(-50%);width:max-content"><img role="presentation" class="select-none" src="data:image/png;base64,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" width="1167" height="648"/><img role="presentation" class="absolute select-none transition-all duration-500 top-0 scale-95 opacity-0" width="1167" height="648"/></div><svg width="308" height="40" viewBox="0 0 757 106" fill="none" xmlns="http://www.w3.org/2000/svg" class="z-1 relative top-[2rem] mx-auto" aria-label="Floating UI text logo"><path d="M5.554 104.854L.55 13.741l62.371-4.01.686 12.48-48.65 3.129 1.529 27.833 46.155-2.968.671 12.232-46.154 2.968 2.117 38.566-13.721.883z" fill="url(#text_svg__paint0_linear_105_151)"></path><path d="M79.872 100.241L75.93 9.076l14.106-.714 3.404 78.676L143 84.528l.541 12.488-63.669 3.225z" fill="url(#text_svg__paint1_linear_105_151)"></path><path d="M184.679 96.32c-9.494.339-17.839-1.28-25.035-4.86-7.112-3.58-12.691-8.801-16.735-15.661-4.047-6.943-6.216-15.163-6.506-24.658-.292-9.58 1.371-17.935 4.988-25.069 3.617-7.134 8.865-12.741 15.744-16.823 6.962-4.084 15.189-6.296 24.683-6.636 9.578-.342 17.922 1.278 25.035 4.86 7.112 3.58 12.691 8.801 16.735 15.661 4.045 6.86 6.213 15.08 6.506 24.658.289 9.496-1.373 17.852-4.988 25.069-3.617 7.134-8.865 12.741-15.744 16.823-6.878 4.082-15.106 6.293-24.683 6.636zm-.382-12.494c6.746-.242 12.534-1.824 17.363-4.749 4.827-3.007 8.454-7.098 10.881-12.27 2.507-5.26 3.653-11.43 3.437-18.51-.216-7.08-1.735-13.113-4.555-18.099-2.739-5.072-6.607-8.894-11.605-11.468-5-2.656-10.873-3.864-17.618-3.623-6.746.242-12.532 1.866-17.359 4.874-4.83 2.924-8.499 7.016-11.006 12.275-2.426 5.174-3.532 11.3-3.316 18.38.217 7.08 1.694 13.156 4.434 18.228 2.82 4.986 6.73 8.807 11.73 11.463 4.997 2.574 10.869 3.74 17.614 3.499z" fill="url(#text_svg__paint2_linear_105_151)"></path><path d="M231.544 93.928l31.699-91.896 18.621-.37 34.663 90.581-15.122.3-28.59-78.949-.25.005-25.899 80.029-15.122.3zm16.859-23.214l-.211-12.498 50.615-1.003.211 12.498-50.615 1.003z" fill="url(#text_svg__paint3_linear_105_151)"></path><path d="M344.392 92.183l-.349-78.75-30.999.161-.056-12.5L389.237.7l.056 12.5-31 .16.349 78.75-14.25.074z" fill="url(#text_svg__paint4_linear_105_151)"></path><path d="M393.909 92.06l.405-91.25 14.25.074-.405 91.25-14.25-.075z" fill="url(#text_svg__paint5_linear_105_151)"></path><path d="M428.781 92.163l1.306-91.24 14.998.25 42.51 69.473.25.004.984-68.743 13.748.23-1.306 91.241-14.998-.251-42.51-69.472-.25-.004-.984 68.743-13.748-.23z" fill="url(#text_svg__paint6_linear_105_151)"></path><path d="M567.61 96.726c-10.244-.337-19.02-2.5-26.328-6.493-7.224-3.99-12.737-9.548-16.538-16.677-3.719-7.125-5.441-15.561-5.168-25.308.274-9.746 2.466-18.053 6.577-24.922 4.11-6.869 9.841-12.058 17.193-15.569 7.351-3.51 16.066-5.1 26.143-4.769 5.497.18 10.727.978 15.689 2.391 4.965 1.33 9.371 3.268 13.217 5.812l-3.581 11.764c-3.52-2.283-7.514-4.04-11.982-5.271a54.66 54.66 0 00-13.693-2.2c-7.08-.233-13.198.941-18.356 3.523-5.072 2.502-9.055 6.29-11.948 11.364-2.808 4.994-4.313 11.115-4.517 18.362-.203 7.247.956 13.496 3.476 18.749 2.606 5.171 6.452 9.216 11.539 12.135 5.089 2.835 11.298 4.373 18.628 4.614 3.914.128 7.756-.12 11.525-.747 3.771-.71 7.136-1.767 10.093-3.17l-2.261 4.803.838-29.864-30.608-1.005.329-11.745 44.351 1.456-1.311 46.732c-4.477 2.104-9.69 3.684-15.639 4.74a83.755 83.755 0 01-17.668 1.295z" fill="url(#text_svg__paint7_linear_105_151)"></path><path d="M683.569 102.109c-11.815-.662-20.669-3.913-26.563-9.753-5.889-5.922-8.581-14.169-8.074-24.74l2.871-59.931 13.729.77-2.752 57.434c-.375 7.825 1.14 13.627 4.547 17.407 3.406 3.78 9.019 5.889 16.84 6.328 7.821.439 13.607-1.031 17.356-4.41 3.749-3.378 5.811-8.98 6.186-16.804l2.752-57.434 13.729.77-2.872 59.931c-.507 10.572-3.972 18.473-10.396 23.704-6.337 5.153-15.455 7.396-27.353 6.728z" fill="url(#text_svg__paint8_linear_105_151)"></path><path d="M736.863 104.166l5.268-91.098 14.217.963-5.268 91.098-14.217-.963z" fill="url(#text_svg__paint9_linear_105_151)"></path><defs><linearGradient id="text_svg__paint0_linear_105_151" x1="24.593" y1="5.298" x2="85.118" y2="89.57" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint1_linear_105_151" x1="99.145" y1="1.013" x2="159.18" y2="84.769" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint2_linear_105_151" x1="171.417" y1="-2.644" x2="225.288" y2="91.82" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint3_linear_105_151" x1="267.954" y1="-4.936" x2="321.957" y2="87.977" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint4_linear_105_151" x1="344.326" y1="1.573" x2="412.78" y2="94.394" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint5_linear_105_151" x1="399.18" y1="1.477" x2="464.232" y2="44.125" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint6_linear_105_151" x1="461.105" y1="-5.431" x2="510.595" y2="91.496" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint7_linear_105_151" x1="556.744" y1="-3.058" x2="605.096" y2="94.256" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint8_linear_105_151" x1="684.016" y1="2.601" x2="729.871" y2="101.57" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient><linearGradient id="text_svg__paint9_linear_105_151" x1="747.392" y1="6.524" x2="803.966" y2="54.859" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC2E7"></stop><stop offset="0.635" stop-color="#9281FD"></stop><stop offset="1" stop-color="#7DFFE8"></stop></linearGradient></defs></svg><div class="z-1 relative mt-24 flex flex-row justify-center gap-x-4"><a class="hover:saturate-110 flex items-center gap-2 whitespace-nowrap rounded bg-gradient-to-br from-red-300 via-violet-300 to-cyan-400 px-4 py-3 font-bold text-gray-900 shadow-lg transition hover:shadow-xl hover:brightness-110 sm:text-lg" href="/docs/getting-started">Get Started <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a><a href="https://github.com/floating-ui/floating-ui" class="flex items-center gap-2 rounded bg-gray-50 px-4 py-3 font-bold text-gray-900 shadow-lg transition hover:shadow-xl sm:text-lg" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> GitHub</a></div><p class="z-1 relative mx-auto mt-16 px-4 text-center text-xl leading-relaxed text-purple-200 dark:prose-invert lg:text-2xl">A JavaScript library to position <strong tabindex="0" role="button" class="darkLfrom-blue-500 relative cursor-default font-semibold decoration-purple-300/70" style="text-decoration-line:underline;text-underline-offset:8px;text-decoration-thickness:1px" data-state="closed">floating elements</strong> and create interactions for them.</p></div></header><main class="relative"><div class="font-satoshi container mx-auto max-w-screen-xl px-4 md:px-8"><h2 class="mb-4 mt-12 inline-block bg-gradient-to-br from-rose-400 via-purple-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-rose-400 dark:via-purple-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">Smart Anchor Positioning</h2><p class="prose text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">Anchor a floating element next to another element while making sure it stays in view by <strong>avoiding collisions</strong>. This lets you position tooltips, popovers, or dropdowns optimally.</p></div><div class="container mx-auto grid max-w-screen-xl gap-4 py-10 md:px-4 lg:grid-cols-2"><div class="relative flex-col justify-between overflow-x-hidden bg-gray-50 px-4 py-8 shadow dark:bg-gray-700 sm:p-8 md:rounded-lg lg:flex"><div class="overflow-hidden"><h3 class="mb-2 text-3xl font-bold">Placement</h3><p class="mb-6 text-xl">Places your floating element relative to another element.</p></div><div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto"><div class="overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding"><div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white"><div class="absolute mx-4 flex h-12 items-center gap-2 sm:flex"><div class="h-3 w-3 rounded-full" style="background:#ec695e"></div><div class="h-3 w-3 rounded-full" style="background:#f4bf4f"></div><div class="h-3 w-3 rounded-full" style="background:#61c653"></div></div><div class="flex h-12 items-center justify-center font-semibold">Click the dots</div></div><div class="will-change-transform"><div class="h-[20rem] overflow-hidden bg-gray-50 p-2 grid place-items-center relative"><button class="absolute p-4 transition hover:scale-125" style="left:calc(50% - 10px - 1rem);top:0" aria-label="top"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-800 bg-gray-800"></div></button><button class="absolute p-4 transition hover:scale-125" style="left:calc(50% - 70px - 1rem);top:0" aria-label="top-start"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="left:calc(50% + 50px - 1rem);top:0" aria-label="top-end"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="left:calc(50% - 10px - 1rem);bottom:0" aria-label="bottom"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="left:calc(50% - 70px - 1rem);bottom:0" aria-label="bottom-start"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="left:calc(50% + 50px - 1rem);bottom:0" aria-label="bottom-end"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="top:calc(50% - 10px - 1rem);right:min(50px, 5%)" aria-label="right"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="top:calc(50% - 70px - 1rem);right:min(50px, 5%)" aria-label="right-start"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="top:calc(50% + 50px - 1rem);right:min(50px, 5%)" aria-label="right-end"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="top:calc(50% - 10px - 1rem);left:min(50px, 5%)" aria-label="left"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="top:calc(50% - 70px - 1rem);left:min(50px, 5%)" aria-label="left-start"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="absolute p-4 transition hover:scale-125" style="top:calc(50% + 50px - 1rem);left:min(50px, 5%)" aria-label="left-end"><div class="h-5 w-5 rounded-full border-2 border-solid border-gray-900"></div></button><button class="z-50 h-24 w-24 cursor-default border-2 border-dashed border-gray-900 bg-gray-50 p-2 text-sm font-bold text-gray-900" aria-label="Reference element">Reference</button><div class="z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50" style="position:absolute;left:0;top:0;visibility:hidden"><div class="px-2 py-2"><div class="text-center text-sm font-bold">top</div></div></div></div></div></div></div><a class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://codesandbox.io/s/lively-waterfall-rbc1pi?file=/src/index.js" target="_blank" rel="noopener noreferrer">CodeSandbox</a></div><div class="relative flex-col justify-between overflow-x-hidden bg-gray-50 px-4 py-8 shadow dark:bg-gray-700 sm:p-8 md:rounded-lg lg:flex"><div class="overflow-hidden"><h3 class="mb-2 text-3xl font-bold">Shift</h3><p class="mb-6 text-xl">Shifts your floating element to keep it in view.</p></div><div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto"><div class="relative overflow-hidden"><div class="overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding"><div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white"><div class="absolute mx-4 flex h-12 items-center gap-2 sm:flex"><div class="h-3 w-3 rounded-full" style="background:#ec695e"></div><div class="h-3 w-3 rounded-full" style="background:#f4bf4f"></div><div class="h-3 w-3 rounded-full" style="background:#61c653"></div></div><div class="flex h-12 items-center justify-center font-semibold">Scroll the container</div></div><div class="will-change-transform"><div class="h-[20rem] overflow-hidden bg-gray-50 p-2 overflow-y-auto"><div style="height:305px"></div><button class="z-50 h-24 w-24 cursor-default border-2 border-dashed border-gray-900 bg-gray-50 p-2 text-sm font-bold text-gray-900 ml-[5%] sm:ml-[33%]" aria-label="Reference element">Reference</button><div class="z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50" style="position:absolute;left:0;top:0;visibility:hidden"><div class="px-2 py-2"><div class="grid h-48 w-20 place-items-center text-sm font-bold">Popover</div></div></div><div style="height:305px"></div></div></div></div></div></div><a class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://codesandbox.io/s/great-lake-5l7m95?file=/src/index.js" target="_blank" rel="noopener noreferrer">CodeSandbox</a></div><div class="relative flex-col justify-between overflow-x-hidden bg-gray-50 px-4 py-8 shadow dark:bg-gray-700 sm:p-8 md:rounded-lg lg:flex"><div class="overflow-hidden"><h3 class="mb-2 text-3xl font-bold">Flip</h3><p class="mb-6 text-xl">Changes the placement of your floating element to keep it in view.</p></div><div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto"><div class="relative overflow-hidden"><div class="overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding"><div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white"><div class="absolute mx-4 flex h-12 items-center gap-2 sm:flex"><div class="h-3 w-3 rounded-full" style="background:#ec695e"></div><div class="h-3 w-3 rounded-full" style="background:#f4bf4f"></div><div class="h-3 w-3 rounded-full" style="background:#61c653"></div></div><div class="flex h-12 items-center justify-center font-semibold">Scroll down</div></div><div class="will-change-transform"><div class="h-[20rem] overflow-hidden bg-gray-50 p-2 grid place-items-center overflow-y-auto relative"><div style="height:305px"></div><button class="z-50 h-24 w-24 cursor-default border-2 border-dashed border-gray-900 bg-gray-50 p-2 text-sm font-bold text-gray-900" aria-label="Reference element">Reference</button><div class="z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50" style="position:absolute;left:0;top:0;visibility:hidden"><div class="px-2 py-2"><span class="text-sm font-bold">Tooltip</span></div></div><div style="height:305px"></div></div></div></div></div></div><a class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://codesandbox.io/s/beautiful-kirch-th1e0j?file=/src/index.js" target="_blank" rel="noopener noreferrer">CodeSandbox</a></div><div class="relative flex-col justify-between overflow-x-hidden bg-gray-50 px-4 py-8 shadow dark:bg-gray-700 sm:p-8 md:rounded-lg lg:flex"><div class="overflow-hidden"><h3 class="mb-2 text-3xl font-bold">Size</h3><p class="mb-6 text-xl">Changes the size of your floating element to keep it in view.</p></div><div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto"><div class="overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding"><div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white"><div class="absolute mx-4 flex h-12 items-center gap-2 sm:flex"><div class="h-3 w-3 rounded-full" style="background:#ec695e"></div><div class="h-3 w-3 rounded-full" style="background:#f4bf4f"></div><div class="h-3 w-3 rounded-full" style="background:#61c653"></div></div><div class="flex h-12 items-center justify-center font-semibold">Scroll the container</div></div><div class="will-change-transform"><div class="h-[20rem] overflow-hidden bg-gray-50 p-2 grid place-items-center overflow-y-auto relative"><div style="height:305px"></div><button class="z-50 h-24 w-24 cursor-default border-2 border-dashed border-gray-900 bg-gray-50 p-2 text-sm font-bold text-gray-900" aria-label="Reference element">Reference</button><div class="z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50" style="height:300px;overflow:hidden;max-height:0;position:absolute;left:0;top:0;visibility:hidden"><div class="px-2 py-2"><div class="grid items-center text-sm font-bold">Dropdown</div></div></div><div style="height:305px"></div></div></div></div></div><a class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://codesandbox.io/s/focused-hamilton-qez78d?file=/src/index.js" target="_blank" rel="noopener noreferrer">CodeSandbox</a></div><div class="relative flex-col justify-between overflow-x-hidden bg-gray-50 px-4 py-8 shadow dark:bg-gray-700 sm:p-8 md:rounded-lg lg:flex"><div class="overflow-hidden"><h3 class="mb-2 text-3xl font-bold">Arrow</h3><p class="mb-6 text-xl">Dynamically positions an arrow element that is center-aware.</p></div><div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto"><div class="relative grid overflow-hidden lg:col-span-5"><div class="overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding"><div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white"><div class="absolute mx-4 flex h-12 items-center gap-2 sm:flex"><div class="h-3 w-3 rounded-full" style="background:#ec695e"></div><div class="h-3 w-3 rounded-full" style="background:#f4bf4f"></div><div class="h-3 w-3 rounded-full" style="background:#61c653"></div></div><div class="flex h-12 items-center justify-center font-semibold">Scroll the container</div></div><div class="will-change-transform"><div class="h-[20rem] overflow-hidden bg-gray-50 p-2 overflow-y-auto"><div style="height:305px"></div><button class="z-50 h-24 w-24 cursor-default border-2 border-dashed border-gray-900 bg-gray-50 p-2 text-sm font-bold text-gray-900 ml-[5%] md:ml-[33%]" aria-label="Reference element">Reference</button><div class="z-10 grid place-items-center bg-rose-500 text-base font-semibold text-gray-50" style="position:absolute;left:0;top:0;visibility:hidden"><div class="px-2 py-2"><div class="h-[12rem] w-24"></div></div><div class="h-4 w-4 bg-gray-800 [left:-0.5rem]" style="position:absolute;left:-0.5rem;background:inherit;transition:transform 0.2s ease;transform:translateX(1rem) rotate(45deg)"></div></div><div style="height:305px"></div></div></div></div></div></div><a class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://codesandbox.io/s/interesting-wescoff-6e1w5i?file=/src/index.js" target="_blank" rel="noopener noreferrer">CodeSandbox</a></div><div class="relative flex-col justify-between overflow-x-hidden bg-gray-50 px-4 py-8 shadow dark:bg-gray-700 sm:p-8 md:rounded-lg lg:flex hidden"><div class="overflow-hidden"><h3 class="mb-2 text-3xl font-bold">Virtual</h3><p class="mb-6 text-xl">Anchor relative to any coordinates, such as your mouse cursor.</p></div><div class="relative items-center rounded-lg bg-gray-800 shadow-md lg:h-auto"><div class="overflow-hidden rounded-lg text-gray-900 [color-scheme:light] dark:border-none bg-clip-padding"><div class="bg-gray-75 dark:bg-gray-600/60 dark:text-white"><div class="absolute mx-4 flex h-12 items-center gap-2 sm:flex"><div class="h-3 w-3 rounded-full" style="background:#ec695e"></div><div class="h-3 w-3 rounded-full" style="background:#f4bf4f"></div><div class="h-3 w-3 rounded-full" style="background:#61c653"></div></div><div class="flex h-12 items-center justify-center font-semibold">Move your mouse</div></div><div class="will-change-transform"><div class="h-[20rem] overflow-hidden bg-gray-50 p-2 relative"><div class="h-full"><div class="bg-rose-500 p-2 text-sm font-bold text-gray-50" style="position:absolute;top:0;left:0;transform:scale(0);opacity:0;transition:transform 0.2s ease, opacity 0.1s ease">Tooltip</div></div></div></div></div></div><a class="absolute right-6 top-6 inline-flex items-center gap-1 border-none font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://codesandbox.io/s/fancy-worker-xkr8xl?file=/src/index.js" target="_blank" rel="noopener noreferrer">CodeSandbox</a></div></div><div class="font-satoshi container mx-auto max-w-screen-xl px-4 md:px-8"><h2 class="mb-4 mt-12 inline-block bg-gradient-to-br from-rose-400 via-purple-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-rose-400 dark:via-purple-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">Interactions for React</h2><p class="prose text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">Build your own floating UI components with React. From simple tooltips to select menus, you have full control while ensuring <strong>fully accessible</strong> UI experiences.</p></div><div class="container mx-auto mb-12 grid max-w-screen-xl gap-4 py-10 dark:text-black sm:grid-cols-2 md:px-4 lg:grid-cols-3"><div class="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]"><div><h3 class="mb-6 text-3xl font-bold">Tooltips</h3><p>Floating elements that display information related to an anchor element on hover or focus.</p></div><div class="flex justify-center gap-1"><button aria-label="Like" class="cursor-default bg-gray-100/75 dark:bg-gray-600/50 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none rounded-full p-3 hover:text-red-500 dark:hover:text-red-300" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button><button aria-label="Share" class="cursor-default bg-gray-100/75 dark:bg-gray-600/50 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none rounded-full p-3 hover:text-blue-500 dark:hover:text-blue-300" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></svg></button><button aria-label="Stats" class="cursor-default bg-gray-100/75 dark:bg-gray-600/50 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none rounded-full p-3 hover:text-orange-500 dark:hover:text-orange-300" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="20" x2="12" y2="10"></line><line x1="18" y1="20" x2="18" y2="4"></line><line x1="6" y1="20" x2="6" y2="16"></line></svg></button><button aria-label="Edit" class="cursor-default bg-gray-100/75 dark:bg-gray-600/50 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none rounded-full p-3 hover:text-green-500 dark:hover:text-green-300" data-state="closed"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></div></div><div class="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]"><div><h3 class="mb-6 text-3xl font-bold">Popovers</h3><p>Floating elements that display an anchored interactive dialog on click.</p></div><div class="flex justify-center gap-1"><div class="flex items-center gap-2 h-14"><button class="cursor-default rounded p-2 px-3 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none bg-transparent dark:bg-transparent data-[state=open]:bg-gray-100/50 dark:data-[state=open]:bg-gray-600 flex gap-2 items-center" aria-label="Balloon name - Edit" data-state="closed" aria-expanded="false" aria-haspopup="dialog"><span class="text-lg font-bold">Balloon name</span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button></div></div></div><div class="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]"><div><h3 class="mb-6 text-3xl font-bold">Select Menus</h3><p>Floating elements that display a list of options to choose from on click.</p></div><div class="flex justify-center gap-1"><div class="flex flex-col gap-2"><label class="text-md flex flex-col items-center font-bold" id="select-label">Select balloon color</label><div aria-labelledby="select-label" aria-autocomplete="none" class="cursor-default p-2 px-3 dark:bg-gray-600/50 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none flex w-[10rem] items-center gap-2 rounded bg-gray-100/75" aria-expanded="false" aria-haspopup="listbox" role="combobox" tabindex="0"><div aria-hidden="true" class="h-4 w-4 rounded-full border border-black/50 bg-clip-padding"></div>Select...</div></div></div></div><div class="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]"><div><h3 class="mb-6 text-3xl font-bold">Comboboxes</h3><p>Floating elements that combine an input and a list of searchable options to choose from.</p></div><div class="flex justify-center gap-1"><input class="rounded border-2 border-gray-300 p-2 outline-none focus:border-blue-500 dark:border-gray-500 dark:bg-gray-600/50" placeholder="Enter balloon flavor" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" role="combobox" value=""/></div></div><div class="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]"><div><h3 class="mb-6 text-3xl font-bold">Dropdown Menus</h3><p>Floating elements that display a list of buttons that perform an action.</p></div><div class="flex justify-center gap-1"><button aria-expanded="false" aria-haspopup="menu" id=":R1ahmH2:" class="flex cursor-default items-center justify-between gap-4 rounded py-2 px-3 text-left transition-colors hover:bg-gray-100/50 data-[open]:bg-gray-100/50 dark:hover:bg-gray-600 dark:data-[open]:bg-gray-600">Edit balloon </button></div></div><div class="flex h-[18rem] flex-col justify-between bg-white p-10 text-center shadow dark:bg-gray-700 dark:text-gray-100 sm:h-[19rem] sm:rounded-lg md:h-[18rem]"><div><h3 class="mb-6 text-3xl font-bold">Dialogs</h3><p>Floating windows overlaid on the UI, rendering content underneath them inert.</p></div><div class="flex justify-center gap-1"><button data-state="closed" aria-expanded="false" aria-haspopup="dialog" class="cursor-default rounded bg-gray-100/75 p-2 px-3 dark:bg-gray-600/50 transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600 select-none">Delete balloon</button></div></div></div><div class="container mx-auto mb-12 max-w-screen-xl px-4 text-center md:px-8 lg:mb-16"><a class="inline-block rounded-md bg-rose-500 p-6 font-bold text-gray-50 transition-colors hover:bg-pink-500 dark:bg-rose-600 sm:text-xl" href="/docs/react">Use Floating UI with React <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="relative top-[-1px] inline-block"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div><div class="container relative mx-auto max-w-screen-xl px-4 md:px-8"><h2 class="mb-4 mt-12 inline-block bg-gradient-to-br from-rose-400 via-purple-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-rose-400 dark:via-purple-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">Tree-shakeable & Platform-agnostic</h2><p class="font-satoshi prose mb-8 text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">In addition to official bindings for the web, React DOM, React Native, and Vue, Floating UI also supports <code class="p-0"><span class="text-cyan-600 dark:text-cyan-300"><</span><span class="text-red-600 dark:text-red-400">canvas</span><span class="text-cyan-600 dark:text-cyan-300">></span></code>, and each module is <a href="https://bundlejs.com/?q=%40floating-ui%2Fdom&treeshake=%5B%7B%0A++computePosition%2Cshift%2ClimitShift%2Cflip%2Chide%2Coffset%2Carrow%2CautoPlacement%2Csize%2Cinline%2CautoUpdate%0A%7D%5D&config=%7B%22compression%22%3A%22brotli%22%7D" class="font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" target="_blank" rel="noopener noreferrer">fully tree-shakeable</a> by your bundler:</p><div class="font-code grid items-center py-8 pb-16"><div class="text-md mx-auto flex flex-col pr-4 text-center sm:pr-20 sm:text-lg md:pr-40 md:text-xl"><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">computePosition<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-gray-600 [font-variant-numeric:tabular-nums] dark:text-gray-400"><span class="invisible">+</span>0.6 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">shift<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.6 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">limitShift<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.2 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">flip<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.8 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">hide<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.2 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">offset<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.1 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">arrow<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.5 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">autoPlacement<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.4 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">size<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.3 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">inline<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.6 kB</span></div><div class="mb-2 flex items-center justify-center gap-2"><code class="flex-1 text-right text-blue-600 dark:text-blue-400">autoUpdate<span class="text-cyan-500 dark:text-cyan-200">()</span></code><span class="text-md text-left text-green-700 [font-variant-numeric:tabular-nums] dark:text-green-400">+0.3 kB</span></div><div class="mb-2 flex items-center justify-center gap-3"><code class="flex-1 text-right text-gray-600 dark:text-gray-400">DOM platform</code><span class="text-md text-left text-yellow-700 [font-variant-numeric:tabular-nums] dark:text-yellow-400">+2.5 kB</span></div></div></div></div><div class="font-satoshi container mx-auto max-w-screen-xl px-4 md:px-8"><h2 class="mb-4 mt-12 inline-block bg-gradient-to-br from-rose-400 via-purple-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-rose-400 dark:via-purple-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">Support Floating UI</h2><p class="prose mb-8 text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">Floating UI is free and open source, proudly sponsored by the following organizations — consider joining them on <a class="font-bold text-rose-600 underline decoration-rose-500/80 decoration-2 underline-offset-4 transition-colors hover:text-gray-1000 hover:decoration-gray-1000 dark:text-rose-300 dark:decoration-rose-300/80 dark:hover:text-gray-50 dark:hover:decoration-gray-50" href="https://opencollective.com/floating-ui" target="_blank" rel="noopener noreferrer">Open Collective</a>.</p><section class="my-16 flex grid md:grid-cols-3 flex-col justify-center gap-8 md:flex-row md:gap-2"><a rel="noopener noreferrer" target="_blank" href="https://www.moderntreasury.com/"><div class="flex flex-col items-center transition-transform"><img class="w-56 rounded-md shadow-lg transition-shadow hover:shadow-xl" src="/sponsors/modern-treasury.jpg" loading="lazy" alt="Sponsor logo" width="224" height="168"/><div class="px-6 py-4"><h3 class="mb-2 text-center text-2xl font-bold">Modern Treasury</h3><p class="text-center dark:text-gray-400">The one place to keep a business’s money flowing</p></div></div></a><a rel="noopener noreferrer" target="_blank" href="https://route4me.com/?utm_source=floating_ui_website"><div class="flex flex-col items-center transition-transform"><img class="w-56 rounded-md shadow-lg transition-shadow hover:shadow-xl" src="/sponsors/route4me.jpg" loading="lazy" alt="Sponsor logo" width="224" height="168"/><div class="px-6 py-4"><h3 class="mb-2 text-center text-2xl font-bold">Route4Me</h3><p class="text-center dark:text-gray-400">Best Route Planning and Route Optimization Software</p></div></div></a></section><div class="my-10 flex flex-wrap justify-center invert dark:invert-0"><a href="https://coupontoaster.com/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/coupontoaster.svg" alt="Coupontoaster - Discount and Coupon Codes" width="48" height="48"/></a><a href="https://ariakit.org/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/ariakit.svg" alt="Ariakit - Toolkit for building accessible UIs" width="48" height="48"/></a><a href="https://www.pyjobs.com/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/pyjobs.svg" alt="PyJobs - Jobs for Python Developers" width="48" height="48"/></a><a href="https://sup.today/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/sup.svg" alt="Sup Standup Bot" width="48" height="48"/></a><a href="https://electricui.com/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/electricui.svg" alt="Electric UI - Tools for building user interfaces for hardware devices." width="48" height="48"/></a><a href="https://mobilemall.co/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/mobilemall.svg" alt="Mobilemall" width="48" height="48"/></a><a href="https://bestkru.com/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/bestkru.svg" alt="BestKru" width="48" height="48"/></a><a href="https://automatio.ai/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/automatio.svg" alt="Automatio - No code Web Scraping & Automation." width="48" height="48"/></a><a href="https://www.wordhint.net/connections/hint/today/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/wordhint.svg" alt="WordHint - Connections Hint Today" width="48" height="48"/></a><a href="https://strandsgame.me/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/strandsgame.svg" alt="Strands Game" width="48" height="48"/></a><a href="https://wordlesolverx.com/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/wordle-solver.svg" alt="Wordle Solver" width="48" height="48"/></a><a href="https://strands-hint.net/" class="mx-0.5 mb-6 inline-block px-4 opacity-70 transition-opacity hover:opacity-100 dark:opacity-30" rel="noopener noreferrer" data-state="closed"><img class="h-12" loading="lazy" src="/sponsors/strands-hint.svg" alt="Strands Hint" width="48" height="48"/></a></div></div><div class="container relative mx-auto max-w-screen-xl px-4 md:px-8"><h2 class="mb-4 mt-12 inline-block bg-gradient-to-br from-rose-400 via-purple-500 to-cyan-500 bg-clip-text py-1 text-3xl font-bold text-transparent dark:mt-0 dark:from-rose-400 dark:via-purple-400 dark:to-cyan-400 lg:mt-16 lg:text-4xl lg:[line-height:3.5rem] dark:lg:mt-4">Install</h2><p class="font-satoshi prose mb-8 text-left text-xl dark:prose-invert lg:text-2xl lg:leading-relaxed">Start playing via your package manager or CDN.</p><div class="grid gap-4 lg:grid-cols-2"><div class="rounded-lg bg-white p-8 shadow dark:bg-gray-700 dark:text-gray-100"><h3 class="mb-4 text-2xl font-bold">Package Manager</h3><p class="text-lg">Install with npm, Yarn, or pnpm.</p><a class="mt-4 flex items-center gap-2 text-xl font-bold text-rose-600 dark:text-rose-300" href="/docs/getting-started">Get started <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div><div class="rounded-lg bg-white p-8 shadow dark:bg-gray-700 dark:text-gray-100"><h3 class="mb-4 text-2xl font-bold">CDN</h3><p class="text-lg">Install with the jsDelivr CDN.</p><a class="mt-4 flex items-center gap-2 text-xl font-bold text-rose-600 dark:text-rose-300" href="/docs/getting-started#cdn">Get started <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a></div></div></div></main><footer class="mt-16 bg-gray-50 py-8 text-center shadow dark:border-t dark:border-gray-800 dark:bg-transparent dark:text-gray-500"><div class="container mx-auto flex max-w-screen-xl flex-col gap-3 px-4"><p><strong class="font-semibold">©  MIT License</strong></p><p class="dark:text-gray-400">Floating UI is the evolution of Popper 2, designed to bring the project to a new level.</p><p class="dark:text-gray-400">Floating shapes in the header are licensed under CC BY from <a class="font-semibold text-rose-600 dark:text-rose-300" href="https://www.figma.com/@killnicole">Vic</a> and <a class="font-semibold text-rose-600 dark:text-rose-300" href="https://www.figma.com/@Artstar3d">Lisa Star</a>. Partial modifications were made.</p><p><a href="https://www.netlify.com/" target="_blank" rel="noopener noreferrer" class="font-semibold text-rose-600 dark:text-rose-300">This site is powered by Netlify</a>.</p></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="">{"props":{"pageProps":{"sponsors":{"website":[{"MemberId":187469,"createdAt":"2021-04-12 22:01","type":"ORGANIZATION","role":"BACKER","tier":"Backer","isActive":true,"totalAmountDonated":4520,"currency":"USD","lastTransactionAt":"2025-02-01 06:02","lastTransactionAmount":100,"profile":"https://opencollective.com/moderntreasury","name":"Modern Treasury","company":null,"description":"Modern Treasury builds payment operations software. Use our web application or API to manage the full cycle of money movement.","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/789bc860-3870-11eb-a79b-a75c0fb43583.png","twitter":"https://twitter.com/moderntreasury","github":"https://github.com/Modern-Treasury","website":"https://www.moderntreasury.com"},{"MemberId":590152,"createdAt":"2024-08-04 13:03","type":"USER","role":"BACKER","tier":"Website Contributor","isActive":true,"totalAmountDonated":700,"currency":"USD","lastTransactionAt":"2025-02-02 04:07","lastTransactionAmount":100,"profile":"https://opencollective.com/route4me","name":"Route4Me Route Planner","company":"@Route4Me","description":"Trusted last mile route planning and route optimization","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/237386c3-48a2-47c6-97ac-5f888cdb4cda/Route4MeIconLogo.png","email":null,"newsletterOptIn":null,"twitter":null,"github":"https://github.com/route4me","website":"https://route4me.com/"}],"mini":[{"MemberId":117731,"createdAt":"2020-08-05 01:13","type":"COLLECTIVE","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":890,"currency":"USD","lastTransactionAt":"2025-02-01 02:06","lastTransactionAmount":20,"profile":"https://opencollective.com/ariakit","name":"Ariakit","company":null,"description":"UI toolkit for building accessible web apps with React","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/febde3c0-0447-11ed-aa6c-592d90f2b953.png","twitter":"https://twitter.com/ariakitjs","github":"https://github.com/ariakit","website":"https://ariakit.org"},{"MemberId":234482,"createdAt":"2021-10-22 09:24","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":800,"currency":"USD","lastTransactionAt":"2025-01-22 11:32","lastTransactionAmount":20,"profile":"https://opencollective.com/coupontoaster","name":"Coupontoaster","company":null,"description":"Coupontoaster is an ultimate platform to Get guaranteed \u0026 working Coupons \u0026 Promo codes for free. Save money at the best online stores and brands now!","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/f29c5e70-2f61-11ec-a459-9d05e8ca651f.jpg","twitter":null,"github":null,"website":"https://coupontoaster.com"},{"MemberId":390170,"createdAt":"2023-01-28 14:05","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":500,"currency":"USD","lastTransactionAt":"2025-02-01 12:08","lastTransactionAmount":20,"profile":"https://opencollective.com/pyjobs","name":"PyJobs","company":null,"description":"Job board for python developers.","image":"https://logo.clearbit.com/pyjobs.com","twitter":null,"github":null,"website":"https://www.pyjobs.com"},{"MemberId":397760,"createdAt":"2023-02-15 06:53","type":"USER","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":500,"currency":"USD","lastTransactionAt":"2025-02-01 13:03","lastTransactionAmount":20,"profile":"https://opencollective.com/vivek10","name":"Supbot.com","company":null,"description":null,"image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/d4f4e967-480c-4da6-80e6-82858ecc5e0c/1882974265975_c2814223e012464d1ead_512.png","email":null,"newsletterOptIn":null,"twitter":null,"github":null,"website":"https://supbot.com/"},{"MemberId":457288,"createdAt":"2023-07-18 10:37","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":380,"currency":"USD","lastTransactionAt":"2025-02-01 19:05","lastTransactionAmount":20,"profile":"https://opencollective.com/electric-ui","name":"Electric UI","company":null,"description":"Electric UI equips engineers with software to build cross-platform user interfaces for realtime hardware visualisation and control.","image":"https://logo.clearbit.com/electricui.com","twitter":null,"github":null,"website":"https://electricui.com"},{"MemberId":466235,"createdAt":"2023-08-08 21:27","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":380,"currency":"USD","lastTransactionAt":"2025-02-01 17:03","lastTransactionAmount":20,"profile":"https://opencollective.com/nfi-cuatro","name":"NFI Cuatro","company":null,"description":"We build logistics software.","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/4a4797e8-7025-4797-a452-5447a1e5d639/Cuatro.jpg","twitter":null,"github":null,"website":null},{"MemberId":480290,"createdAt":"2023-09-14 10:36","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":340,"currency":"USD","lastTransactionAt":"2025-01-14 10:21","lastTransactionAmount":20,"profile":"https://opencollective.com/mobilemallco","name":"Mobilemall.co","company":null,"description":"Mobilemall.co is a global mobile phones portal where you can check latest mobile phone prices for countries all across the globe. ","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/2ed11d60-7259-42de-bab3-53cfe10dc751/mobilemall-logo-sqaure.jpg","twitter":null,"github":null,"website":"https://mobilemall.co/"},{"MemberId":533657,"createdAt":"2024-02-10 04:59","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":260,"currency":"USD","lastTransactionAt":"2025-02-01 22:03","lastTransactionAmount":20,"profile":"https://opencollective.com/bestkru","name":"BestKru","company":null,"description":"","image":"https://logo.clearbit.com/bestkru.com","twitter":"https://twitter.com/thebestkru","github":"https://github.com/BestKru","website":"https://bestkru.com/"},{"MemberId":588500,"createdAt":"2024-07-29 18:55","type":"USER","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":140,"currency":"USD","lastTransactionAt":"2025-02-02 04:04","lastTransactionAmount":20,"profile":"https://opencollective.com/guest-7bbeba0f","name":"Navattic","company":null,"description":null,"image":null,"email":null,"newsletterOptIn":null,"twitter":null,"github":null,"website":null},{"MemberId":595794,"createdAt":"2024-08-23 09:22","type":"USER","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":120,"currency":"USD","lastTransactionAt":"2025-02-06 00:04","lastTransactionAmount":20,"profile":"https://opencollective.com/kinder","name":"Automatio AI","company":"Automatio AI","description":"No-code Web Automation powered by AI","image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/e64d5bbb-bf37-48d0-8327-ff18da511363/DMRkqMWr63xns1NoolkE_qnRd4EwybzHyn6b916iB_geMQbWAmNIfrMc216ST6_composites_zwA55Os7BZBsfFNcRvDa_f5DnyHKpKRozblXPguMQ.png","email":null,"newsletterOptIn":null,"twitter":"https://twitter.com/shtefcs","github":"https://github.com/shtefcs","website":"https://automatio.ai/"},{"MemberId":607663,"createdAt":"2024-10-01 06:11","type":"USER","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":120,"currency":"USD","lastTransactionAt":"2025-02-02 07:10","lastTransactionAmount":20,"profile":"https://opencollective.com/wordhint","name":"WordHint","company":null,"description":null,"image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/ae660747-6086-4b34-9268-4342e9719b85/fwefewf.png","email":null,"newsletterOptIn":null,"twitter":null,"github":null,"website":"https://www.wordhint.net/"},{"MemberId":651664,"createdAt":"2025-01-17 23:49","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":20,"currency":"USD","lastTransactionAt":"2025-01-17 23:49","lastTransactionAmount":20,"profile":"https://opencollective.com/strands-game","name":"Strands Game","company":null,"description":null,"image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/ab526d20-3b0a-4529-b033-9228a9b877f8/Group_164.png","twitter":null,"github":null,"website":"https://strandsgame.me/"},{"MemberId":652449,"createdAt":"2025-01-20 19:30","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":20,"currency":"USD","lastTransactionAt":"2025-01-20 19:30","lastTransactionAmount":20,"profile":"https://opencollective.com/wordle-solver","name":"Wordle Solver","company":null,"description":null,"image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/1054584e-57ce-402b-b87b-e746be06b26b/Group%2081502.png","twitter":null,"github":null,"website":"https://wordlesolverx.com/"},{"MemberId":656348,"createdAt":"2025-02-01 14:12","type":"ORGANIZATION","role":"BACKER","tier":"Mini Contributor","isActive":true,"totalAmountDonated":20,"currency":"USD","lastTransactionAt":"2025-02-01 14:12","lastTransactionAmount":20,"profile":"https://opencollective.com/strands-hint","name":"Strands Hint","company":null,"description":null,"image":"https://opencollective-production.s3.us-west-1.amazonaws.com/account-avatar/e65f4ae7-138a-4781-9f35-19bc12d333c0/Frame%20(1).png","twitter":null,"github":null,"website":"https://strands-hint.net"}]}},"__N_SSG":true},"page":"/","query":{},"buildId":"ik88V7O7Y4F1xf7scD1a_","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>