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>

Caveats

SSR

When SSR is enabled and the floating element is visible upon pageload it will first be positioned in the top left of your screen until the position is calculated. This is usually not desirable. To prevent this, you can utilize the isPositioned prop returned from the useFloating hook:

svelte

<script lang="ts">
	import { useFloating } from '@skeletonlabs/floating-ui-svelte';

	const floating = useFloating();
</script>

<!-- Floating element is always rendered -->
<div class="floating" bind:this={floating.elements.floating} style={floating.floatingStyles}>
	<!-- The content of the floating element is shown once `isPositioned` is true -->
	{#if floating.isPositioned}
		Floating
	{/if}
</div>