Floating Panel

Displays content in a floating window.

Installation


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.

Controlled Position

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

Custom spacing

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

Default spacing is --spacing(4).

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

Frame

On This Page

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