Getting Started

Floating UI Svelte is a library that helps you create floating elements such as tooltips, popovers, dropdowns, and more.

Support

Supports Svelte v5 projects created with SvelteKit, Vite/Svelte, or Astro.

Install

To install Floating UI, use your package manager of choice.

bash

npm install @skeletonlabs/floating-ui-svelte
# pnpm install @skeletonlabs/floating-ui-svelte
# yarn install @skeletonlabs/floating-ui-svelte
# bun install @skeletonlabs/floating-ui-svelte

Usage

Making elements "float

The following styles must be applied to any and all floating elements. We recommend using a class as shown below. Note that Floating UI does not take an opinionated stance on z-index stacking.

css

.floating {
	width: max-content;
	position: absolute;
	top: 0;
	left: 0;
}

html

<div class="floating">Some floating element.</div>