Getting Started

Requirements

Supports projects created using Svelte v5.

Install

Install Floating UI Svelte using your package manager of choice.

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

Floating UI Features

Floating UI Svelte exposes all Floating UI middleware, types, etc. You do not need to install @floating-ui/dom seperately.

import { flip, type Strategy } from '@skeletonlabs/floating-ui-svelte';

Making elements "float"

At minimum, the following styles must be applied to ensure floating elements do not disrupt the flow of the document. This can be handled using a single reusable CSS class.

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

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

Z-Index Stacking

Please be aware that Floating UI does not take an opinionated stance on z-index stacking.

Caveats

Server-Side Rendering (SSR)

When SSR is enabled and the floating element is visible upon page load it will first be positioned in the top left of your screen. It will remain until the position is calculated. To prevent this, you may utilize the isPositioned prop returned from the useFloating hook:

<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>