Floating Panel · Skeleton

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react';

export default function Default() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>
								This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing
								from the bottom-right corner.
							</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script>
	import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Floating Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon className="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>
						This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing from
						the bottom-right corner.
					</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Size Constraints

Use the minSize and maxSize props to set size constraints on the Floating Panel.

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react';

export default function SizeConstraints() {
	return (
		<FloatingPanel maxSize={{ width: 900, height: 600 }} minSize={{ width: 300, height: 200 }}>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This panel has size constraints applied: minimum 300x200 pixels and maximum 900x600 pixels.</p>
							<p>Try resizing from the bottom-right corner - the panel will respect these boundaries.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script>
	import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel maxSize={{ width: 900, height: 600 }} minSize={{ width: 300, height: 200 }}>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Floating Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon className="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>This panel has size constraints applied: minimum 300x200 pixels and maximum 900x600 pixels.</p>
					<p>Try resizing from the bottom-right corner - the panel will respect these boundaries.</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Controlled

Control the open state and size of the Floating Panel with your own state.

OpenWidth:Height:

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';
import { useState } from 'react';

export default function Controlled() {
	const [open, setOpen] = useState(false);
	const [size, setSize] = useState({
		width: 400,
		height: 300,
	});

	return (
		<>
			<div className="card bg-surface-100-900 p-4 flex flex-col gap-4">
				<label className="label">
					<span className="label-text">Open</span>
					<input type="checkbox" className="checkbox" checked={open} onChange={(e) => setOpen(e.currentTarget.checked)} />
				</label>
				<label className="label">
					<span className="label-text">Width:</span>
					<input
						type="number"
						className="input w-24"
						value={size.width}
						onChange={(e) => setSize({ ...size, width: Number(e.target.value) })}
					/>
				</label>
				<label className="label">
					<span className="label-text">Height:</span>
					<input
						type="number"
						className="input w-24"
						value={size.height}
						onChange={(e) => setSize({ ...size, height: Number(e.target.value) })}
					/>
				</label>
			</div>

			<FloatingPanel
				open={open}
				onOpenChange={(details) => setOpen(details.open)}
				size={size}
				onSizeChange={(details) => setSize(details.size)}
			>
				<Portal>
					<FloatingPanel.Positioner className="z-50">
						<FloatingPanel.Content>
							<FloatingPanel.DragTrigger>
								<FloatingPanel.Header>
									<FloatingPanel.Title>
										<GripVerticalIcon className="size-4" />
										Controlled Panel
									</FloatingPanel.Title>
									<FloatingPanel.Control>
										<FloatingPanel.StageTrigger stage="minimized">
											<MinusIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="maximized">
											<MaximizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="default">
											<MinimizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.CloseTrigger>
											<XIcon className="size-4" />
										</FloatingPanel.CloseTrigger>
									</FloatingPanel.Control>
								</FloatingPanel.Header>
							</FloatingPanel.DragTrigger>
							<FloatingPanel.Body>
								<p>This panel's open state and size are controlled via the inputs above.</p>
								<p>Try changing the values or resizing/closing the panel to see the inputs update.</p>
							</FloatingPanel.Body>
							<FloatingPanel.ResizeTrigger axis="se" />
						</FloatingPanel.Content>
					</FloatingPanel.Positioner>
				</Portal>
			</FloatingPanel>
		</>
	);
}

Open Width: Height:

svelte

<script lang="ts">
	import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';

	let open = $state(false);
	let size = $state({
		width: 400,
		height: 300,
	});
</script>

<div class="card bg-surface-100-900 p-4 flex flex-col gap-4">
	<label class="label">
		<span class="label-text">Open</span>
		<input type="checkbox" class="checkbox" bind:checked={open} />
	</label>
	<label class="label">
		<span class="label-text">Width:</span>
		<input type="number" class="input" bind:value={size.width} />
	</label>
	<label class="label">
		<span class="label-text">Height:</span>
		<input type="number" class="input" bind:value={size.height} />
	</label>
</div>

<FloatingPanel {open} onOpenChange={(details) => (open = details.open)} {size} onSizeChange={(details) => (size = details.size)}>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Controlled Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon class="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>This panel's open state and size are controlled via the inputs above.</p>
					<p>Try changing the values or resizing/closing the panel to see the inputs update.</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Anchor Position

Position the panel relative to another element using the defaultPosition prop.

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function AnchorPosition() {
	return (
		<div className="space-y-4">
			<FloatingPanel
				getAnchorPosition={(ctx) => {
					if (!ctx.triggerRect) return { x: 0, y: 0 };
					return {
						x: ctx.triggerRect.x + ctx.triggerRect.width / 2,
						y: ctx.triggerRect.y + ctx.triggerRect.height / 2,
					};
				}}
			>
				<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
				<Portal>
					<FloatingPanel.Positioner className="z-50">
						<FloatingPanel.Content>
							<FloatingPanel.DragTrigger>
								<FloatingPanel.Header>
									<FloatingPanel.Title>
										<GripVerticalIcon className="size-4" />
										Anchored Panel
									</FloatingPanel.Title>
									<FloatingPanel.Control>
										<FloatingPanel.StageTrigger stage="minimized">
											<MinusIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="maximized">
											<MaximizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.StageTrigger stage="default">
											<MinimizeIcon className="size-4" />
										</FloatingPanel.StageTrigger>
										<FloatingPanel.CloseTrigger>
											<XIcon className="size-4" />
										</FloatingPanel.CloseTrigger>
									</FloatingPanel.Control>
								</FloatingPanel.Header>
							</FloatingPanel.DragTrigger>
							<FloatingPanel.Body>
								<p>This panel is centered in the viewport using getAnchorPosition.</p>
								<p>The position is calculated based on the boundary rectangle.</p>
							</FloatingPanel.Body>
							<FloatingPanel.ResizeTrigger axis="se" />
						</FloatingPanel.Content>
					</FloatingPanel.Positioner>
				</Portal>
			</FloatingPanel>
		</div>
	);
}

svelte

<script lang="ts">
	import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="space-y-4">
	<FloatingPanel
		getAnchorPosition={(ctx) => {
			if (!ctx.triggerRect) return { x: 0, y: 0 };
			return {
				x: ctx.triggerRect.x + ctx.triggerRect.width / 2,
				y: ctx.triggerRect.y + ctx.triggerRect.height / 2,
			};
		}}
	>
		<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
		<Portal>
			<FloatingPanel.Positioner class="z-50">
				<FloatingPanel.Content>
					<FloatingPanel.DragTrigger>
						<FloatingPanel.Header>
							<FloatingPanel.Title>
								<GripVerticalIcon class="size-4" />
								Anchored Panel
							</FloatingPanel.Title>
							<FloatingPanel.Control>
								<FloatingPanel.StageTrigger stage="minimized">
									<MinusIcon class="size-4" />
								</FloatingPanel.StageTrigger>
								<FloatingPanel.StageTrigger stage="maximized">
									<MaximizeIcon class="size-4" />
								</FloatingPanel.StageTrigger>
								<FloatingPanel.StageTrigger stage="default">
									<MinimizeIcon class="size-4" />
								</FloatingPanel.StageTrigger>
								<FloatingPanel.CloseTrigger>
									<XIcon class="size-4" />
								</FloatingPanel.CloseTrigger>
							</FloatingPanel.Control>
						</FloatingPanel.Header>
					</FloatingPanel.DragTrigger>
					<FloatingPanel.Body>
						<p>This panel is centered in the viewport using getAnchorPosition.</p>
						<p>The position is calculated based on the boundary rectangle.</p>
					</FloatingPanel.Body>
					<FloatingPanel.ResizeTrigger axis="se" />
				</FloatingPanel.Content>
			</FloatingPanel.Positioner>
		</Portal>
	</FloatingPanel>
</div>

Resize Triggers

Add resize triggers on all sides and corners of the Floating Panel using the axis prop.

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react';

export default function Default() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>
								This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing
								from the bottom-right corner.
							</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="n" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="e" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="w" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="s" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="ne" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="se" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="sw" />
						<FloatingPanel.ResizeTrigger className="bg-primary-500/50" axis="nw" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script>
	import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Floating Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon className="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>
						This is a floating panel that can be dragged, resized, minimized, and maximized. Try dragging from the header or resizing from
						the bottom-right corner.
					</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="n" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="e" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="w" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="s" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="ne" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="se" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="sw" />
				<FloatingPanel.ResizeTrigger class="bg-primary-500/50" axis="nw" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Disable Dragging

Disable dragging by setting the draggable prop to false. The panel will remain in a fixed position but can still be resized.

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function DisableDragging() {
	return (
		<FloatingPanel draggable={false}>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Fixed Position Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This panel cannot be dragged - the position is fixed.</p>
							<p>However, it can still be resized from the bottom-right corner.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script lang="ts">
	import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel draggable={false}>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Fixed Position Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon class="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>This panel cannot be dragged - the position is fixed.</p>
					<p>However, it can still be resized from the bottom-right corner.</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Disable Resizing

Disable resizing by setting the resizable prop to false. The panel will have a fixed size but can still be dragged.

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function DisableResizing() {
	return (
		<FloatingPanel resizable={false}>
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Fixed Size Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This panel cannot be resized.</p>
							<p>Try dragging the edges - they won't respond.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script lang="ts">
	import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel resizable={false}>
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Fixed Size Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon class="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>This panel cannot be resized.</p>
					<p>Try dragging the edges - they won't respond.</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Direction

Set the text direction (ltr or rtl) using the dir prop.

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';
import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from 'lucide-react';

export default function Dir() {
	return (
		<FloatingPanel dir="rtl">
			<FloatingPanel.Trigger className="btn preset-filled">Open Panel</FloatingPanel.Trigger>
			<Portal>
				<FloatingPanel.Positioner className="z-50">
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title>
									<GripVerticalIcon className="size-4" />
									Floating Panel
								</FloatingPanel.Title>
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger stage="minimized">
										<MinusIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="maximized">
										<MaximizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.StageTrigger stage="default">
										<MinimizeIcon className="size-4" />
									</FloatingPanel.StageTrigger>
									<FloatingPanel.CloseTrigger>
										<XIcon className="size-4" />
									</FloatingPanel.CloseTrigger>
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body>
							<p>This is a floating panel with right-to-left (RTL) direction.</p>
							<p>You can drag it from the header or resize it from the bottom-right corner.</p>
						</FloatingPanel.Body>
						<FloatingPanel.ResizeTrigger axis="se" />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script lang="ts">
	import { GripVerticalIcon, XIcon, MinusIcon, MaximizeIcon, MinimizeIcon } from '@lucide/svelte';
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel dir="rtl">
	<FloatingPanel.Trigger class="btn preset-filled">Open Panel</FloatingPanel.Trigger>
	<Portal>
		<FloatingPanel.Positioner class="z-50">
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title>
							<GripVerticalIcon class="size-4" />
							Floating Panel
						</FloatingPanel.Title>
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger stage="minimized">
								<MinusIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="maximized">
								<MaximizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.StageTrigger stage="default">
								<MinimizeIcon class="size-4" />
							</FloatingPanel.StageTrigger>
							<FloatingPanel.CloseTrigger>
								<XIcon class="size-4" />
							</FloatingPanel.CloseTrigger>
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body>
					<p>This is a floating panel with right-to-left (RTL) direction.</p>
					<p>You can drag it from the header or resize it from the bottom-right corner.</p>
				</FloatingPanel.Body>
				<FloatingPanel.ResizeTrigger axis="se" />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

Anatomy

Here’s an overview of how the Floating Panel component is structured in code:

tsx

import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<FloatingPanel>
			<FloatingPanel.Trigger />
			<Portal>
				<FloatingPanel.Positioner>
					<FloatingPanel.Content>
						<FloatingPanel.DragTrigger>
							<FloatingPanel.Header>
								<FloatingPanel.Title />
								<FloatingPanel.Control>
									<FloatingPanel.StageTrigger />
									<FloatingPanel.CloseTrigger />
								</FloatingPanel.Control>
							</FloatingPanel.Header>
						</FloatingPanel.DragTrigger>
						<FloatingPanel.Body />
						<FloatingPanel.ResizeTrigger />
					</FloatingPanel.Content>
				</FloatingPanel.Positioner>
			</Portal>
		</FloatingPanel>
	);
}

svelte

<script lang="ts">
	import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<FloatingPanel>
	<FloatingPanel.Trigger />
	<Portal>
		<FloatingPanel.Positioner>
			<FloatingPanel.Content>
				<FloatingPanel.DragTrigger>
					<FloatingPanel.Header>
						<FloatingPanel.Title />
						<FloatingPanel.Control>
							<FloatingPanel.StageTrigger />
							<FloatingPanel.CloseTrigger />
						</FloatingPanel.Control>
					</FloatingPanel.Header>
				</FloatingPanel.DragTrigger>
				<FloatingPanel.Body />
				<FloatingPanel.ResizeTrigger />
			</FloatingPanel.Content>
		</FloatingPanel.Positioner>
	</Portal>
</FloatingPanel>

API Reference

Root

Prop	Default	Type
`children`	—	ReactNode
`ids`	—	Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }> \| undefined The ids of the elements in the floating panel. Useful for composition.
`translations`	—	IntlTranslations \| undefined The translations for the floating panel.
`strategy`	"fixed"	"absolute" \| "fixed" \| undefined The strategy to use for positioning
`allowOverflow`	true	boolean \| undefined Whether the panel should be strictly contained within the boundary when dragging
`open`	—	boolean \| undefined The controlled open state of the panel
`defaultOpen`	false	boolean \| undefined The initial open state of the panel when rendered. Use when you don't need to control the open state of the panel.
`draggable`	true	boolean \| undefined Whether the panel is draggable
`resizable`	true	boolean \| undefined Whether the panel is resizable
`size`	—	Size \| undefined The size of the panel
`defaultSize`	—	Size \| undefined The default size of the panel
`minSize`	—	Size \| undefined The minimum size of the panel
`maxSize`	—	Size \| undefined The maximum size of the panel
`position`	—	Point \| undefined The controlled position of the panel
`defaultPosition`	—	Point \| undefined The initial position of the panel when rendered. Use when you don't need to control the position of the panel.
`getAnchorPosition`	—	((details: AnchorPositionDetails) => Point) \| undefined Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.
`lockAspectRatio`	—	boolean \| undefined Whether the panel is locked to its aspect ratio
`closeOnEscape`	—	boolean \| undefined Whether the panel should close when the escape key is pressed
`getBoundaryEl`	—	(() => HTMLElement \| null) \| undefined The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.
`disabled`	—	boolean \| undefined Whether the panel is disabled
`onPositionChange`	—	((details: PositionChangeDetails) => void) \| undefined Function called when the position of the panel changes via dragging
`onPositionChangeEnd`	—	((details: PositionChangeDetails) => void) \| undefined Function called when the position of the panel changes via dragging ends
`onOpenChange`	—	((details: OpenChangeDetails) => void) \| undefined Function called when the panel is opened or closed
`onSizeChange`	—	((details: SizeChangeDetails) => void) \| undefined Function called when the size of the panel changes via resizing
`onSizeChangeEnd`	—	((details: SizeChangeDetails) => void) \| undefined Function called when the size of the panel changes via resizing ends
`persistRect`	—	boolean \| undefined Whether the panel size and position should be preserved when it is closed
`gridSize`	1	number \| undefined The snap grid for the panel
`onStageChange`	—	((details: StageChangeDetails) => void) \| undefined Function called when the stage of the panel changes
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => Node \| ShadowRoot \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Provider

Prop	Default	Type
`value`	—	FloatingPanelApi<PropTypes>
`children`	—	ReactNode

Context

Prop	Default	Type
`children`	—	(floatingPanel: FloatingPanelApi<PropTypes>) => ReactNode

Trigger

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Positioner

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Content

txt

card overflow-hidden shadow-lg border border-surface-300-700

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

DragTrigger

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Header

txt

px-4 py-2 grid grid-cols-[1fr_auto] gap-2 items-center bg-surface-200-800 overflow-y-hidden

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Title

txt

flex justify-start items-center gap-2 whitespace-nowrap

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Control

txt

flex gap-1

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

StageTrigger

txt

btn-icon hover:preset-tonal

Prop	Default	Type
`stage`	—	Stage The stage of the panel
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

CloseTrigger

txt

btn-icon hover:preset-tonal

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"button">) => Element) \| undefined Render the element yourself

Body

txt

h-full bg-surface-100-900 p-4 overflow-y-auto

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ResizeTrigger

txt

data-[axis*=n]:h-2 data-[axis*=s]:h-2 data-[axis*=e]:w-2 data-[axis*=w]:w-2 data-[axis=n]:top-0

Prop	Default	Type
`axis`	—	ResizeTriggerAxis The axis of the resize handle
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Root

Prop	Default	Type
`ids`	—	Partial<{ trigger: string; positioner: string; content: string; title: string; header: string; }> \| undefined The ids of the elements in the floating panel. Useful for composition.
`translations`	—	IntlTranslations \| undefined The translations for the floating panel.
`strategy`	"fixed"	"absolute" \| "fixed" \| undefined The strategy to use for positioning
`allowOverflow`	true	boolean \| undefined Whether the panel should be strictly contained within the boundary when dragging
`open`	—	boolean \| undefined The controlled open state of the panel
`defaultOpen`	false	boolean \| undefined The initial open state of the panel when rendered. Use when you don't need to control the open state of the panel.
`draggable`	true	boolean \| undefined Whether the panel is draggable
`resizable`	true	boolean \| undefined Whether the panel is resizable
`size`	—	Size \| undefined The size of the panel
`defaultSize`	—	Size \| undefined The default size of the panel
`minSize`	—	Size \| undefined The minimum size of the panel
`maxSize`	—	Size \| undefined The maximum size of the panel
`position`	—	Point \| undefined The controlled position of the panel
`defaultPosition`	—	Point \| undefined The initial position of the panel when rendered. Use when you don't need to control the position of the panel.
`getAnchorPosition`	—	((details: AnchorPositionDetails) => Point) \| undefined Function that returns the initial position of the panel when it is opened. If provided, will be used instead of the default position.
`lockAspectRatio`	—	boolean \| undefined Whether the panel is locked to its aspect ratio
`closeOnEscape`	—	boolean \| undefined Whether the panel should close when the escape key is pressed
`getBoundaryEl`	—	(() => HTMLElement \| null) \| undefined The boundary of the panel. Useful for recalculating the boundary rect when the it is resized.
`disabled`	—	boolean \| undefined Whether the panel is disabled
`onPositionChange`	—	((details: PositionChangeDetails) => void) \| undefined Function called when the position of the panel changes via dragging
`onPositionChangeEnd`	—	((details: PositionChangeDetails) => void) \| undefined Function called when the position of the panel changes via dragging ends
`onOpenChange`	—	((details: OpenChangeDetails) => void) \| undefined Function called when the panel is opened or closed
`onSizeChange`	—	((details: SizeChangeDetails) => void) \| undefined Function called when the size of the panel changes via resizing
`onSizeChangeEnd`	—	((details: SizeChangeDetails) => void) \| undefined Function called when the size of the panel changes via resizing ends
`persistRect`	—	boolean \| undefined Whether the panel size and position should be preserved when it is closed
`gridSize`	1	number \| undefined The snap grid for the panel
`onStageChange`	—	((details: StageChangeDetails) => void) \| undefined Function called when the stage of the panel changes
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => Node \| ShadowRoot \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`children`	—	Snippet<[]> \| undefined The default slot content to be rendered within the component.

Provider

Prop	Default	Type
`value`	—	() => FloatingPanelApi<PropTypes>
`children`	—	Snippet<[]> \| undefined The default slot content to be rendered within the component.

Context

Prop	Default	Type
`children`	—	Snippet<[() => FloatingPanelApi<PropTypes>]>

Trigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Positioner

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Content

txt

card overflow-hidden shadow-lg border border-surface-300-700

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

DragTrigger

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Header

txt

px-4 py-2 grid grid-cols-[1fr_auto] gap-2 items-center bg-surface-200-800 overflow-y-hidden

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Title

txt

flex justify-start items-center gap-2 whitespace-nowrap

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Control

txt

flex gap-1

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

StageTrigger

txt

btn-icon hover:preset-tonal

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself
`stage`	—	Stage The stage of the panel

CloseTrigger

txt

btn-icon hover:preset-tonal

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"button">]> \| undefined Render the element yourself

Body

txt

h-full bg-surface-100-900 p-4 overflow-y-auto

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ResizeTrigger

txt

data-[axis*=n]:h-2 data-[axis*=s]:h-2 data-[axis*=e]:w-2 data-[axis*=w]:w-2 data-[axis=n]:top-0

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself
`axis`	—	ResizeTriggerAxis The axis of the resize handle