# Floating Panel A draggable, resizable floating panel with minimize/maximize controls. ```tsx import { FloatingPanel, Portal } from '@skeletonlabs/skeleton-react'; import { GripVerticalIcon, MinimizeIcon, XIcon, MinusIcon, MaximizeIcon } from 'lucide-react'; export default function Default() { return ( Open Panel Floating Panel

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.

); } ``` ## 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 ( Open Panel Floating Panel

This panel has size constraints applied: minimum 300x200 pixels and maximum 900x600 pixels.

Try resizing from the bottom-right corner - the panel will respect these boundaries.

); } ``` ## Controlled Control the open state and size of the Floating Panel with your own state. ```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 ( <>

setOpen(e.currentTarget.checked)} /> Open Panel Width: setSize({ ...size, width: Number(e.target.value) })} /> Height: setSize({ ...size, height: Number(e.target.value) })} />

setOpen(details.open)} size={size} onSizeChange={(details) => setSize(details.size)} > Controlled Panel

This panel's open state and size are controlled via the inputs above.

Try changing the values or resizing/closing the panel to see the inputs update.

); } ``` ## 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 (

{ 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, }; }} > Open Panel Anchored Panel

This panel is centered in the viewport using getAnchorPosition.

The position is calculated based on the boundary rectangle.

); } ``` ## 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 ( Open Panel Floating Panel

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.

); } ``` ## 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 ( Open Panel Fixed Position Panel

This panel cannot be dragged - the position is fixed.

However, it can still be resized from the bottom-right corner.

); } ``` ## 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 ( Open Panel Fixed Size Panel

This panel cannot be resized.

Try dragging the edges - they won't respond.

); } ``` ## 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 ( Open Panel Floating Panel

This is a floating panel with right-to-left (RTL) direction.

You can drag it from the header or resize it from the bottom-right corner.

); } ``` ## 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 ( ); } ``` ## API Reference