Sections

Components

Utilities

Forms

Hooks

useIsMobile

Floating Panel

Copy Markdown

Displays content in a floating window.

Docs API

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/floating-panel

Anatomy#

FloatingPanel
├── FloatingPanelTrigger
└── FloatingPanelContent
    ├── FloatingPanelDragTrigger
    ├── FloatingPanelHeader
    │ ├── FloatingPanelControl
    │ │ ├── FloatingPanelMinimize
    │ │ ├── FloatingPanelMaximize
    │ │ └── FloatingPanelRestore
    │ ├── FloatingPanelTitle
    │ ├── FloatingPanelResizeTrigger
    │ ├── FloatingPanelStageTrigger
    │ └── FloatingPanelCloseTrigger
    ├── FloatingPanelBody
    └── FloatingPanelFooter

Usage#

import { 
  FloatingPanel,
  FloatingPanelTrigger,
  FloatingPanelContent,
  FloatingPanelHeader,
  FloatingPanelTitle,
  FloatingPanelBody,
} from "@/components/ui/floating-panel";

<FloatingPanel>
  <FloatingPanelTrigger />
  <FloatingPanelContent>
    <FloatingPanelHeader>
      <FloatingPanelTitle />
    </FloatingPanelHeader>
    <FloatingPanelBody />
  </FloatingPanelContent>
</FloatingPanel>

Examples#

Controlled Size#

Control the panel size programmatically using the size and onSizeChange props.

PreviewCode

Open

Controlled Position#

Control the panel position programmatically using the position and onPositionChange props.

PreviewCode

Open

Custom spacing#

Use [--space:--spacing("value")] on FloatingPanelContent to adjust internal padding.

Default spacing is --spacing(4).

PreviewCode

Open

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference#

FloatingPanel#

Root component. Manages panel position and drag state.

Prop	Type	Default
`open`	`boolean`	`-`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(details: OpenChangeDetails) => void`	`-`
`position`	`Point`	`-`
`defaultPosition`	`Point`	`-`
`onPositionChange`	`(details: PositionChangeDetails) => void`	`-`
`size`	`Size`	`-`
`defaultSize`	`Size`	`-`
`onSizeChange`	`(details: SizeChangeDetails) => void`	`-`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`draggable`	`boolean`	`true`
`resizable`	`boolean`	`true`
`className`	`string`	`-`

FloatingPanelTrigger#

Opens the floating panel on click.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FloatingPanelContent#

Holds the panel content.

Prop	Type	Default
`resizable`	`boolean`	`true`
`className`	`string`	`-`

Attribute	Default
`--space`	`--spacing(4)`

FloatingPanelHeader#

Header area. Acts as drag handle for repositioning.

Prop	Type	Default
`className`	`string`	`-`

FloatingPanelTitle#

Title for the panel.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

FloatingPanelBody#

Scrollable body content. Uses ScrollArea for overflow.

Prop	Type	Default
`scrollFade`	`boolean`	`false`
`className`	`string`	`-`

FloatingPanelCloseTrigger#

Closes the panel on click.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

For a complete list of props, see the Ark UI documentation.

[

Float ](/docs/components/float)[

Frame ](/docs/components/frame)

On This Page

Installation Anatomy Usage Examples Controlled Size Controlled Position Custom spacing API Reference FloatingPanel FloatingPanelTrigger FloatingPanelContent FloatingPanelHeader FloatingPanelTitle FloatingPanelBody FloatingPanelCloseTrigger