3.0.1

Animations

Floating Panel

Pronew

A button that grows into a floating panel and shrinks back on close.

Notes stay on this page.

Installation

npx shadcn@latest add @blank-pro/floating-panel

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import {
  FloatingPanel,
  FloatingPanelBody,
  FloatingPanelContent,
  FloatingPanelHeader,
  FloatingPanelTitle,
  FloatingPanelTrigger,
} from "@/components/ui/floating-panel"
<FloatingPanel>
  <FloatingPanelTrigger>Add note</FloatingPanelTrigger>
  <FloatingPanelContent>
    <FloatingPanelHeader>
      <FloatingPanelTitle>Add note</FloatingPanelTitle>
    </FloatingPanelHeader>
    <FloatingPanelBody>…</FloatingPanelBody>
  </FloatingPanelContent>
</FloatingPanel>

Unlike a popover, the panel does not appear next to its trigger — the trigger becomes the panel. Both share one layout identity, so the button's box springs open into the panel, its label flies into FloatingPanelTitle, and closing plays it in reverse. The panel opens from the trigger's corner and is nudged back inside the viewport when it would overflow.

It behaves as a modal dialog: focus moves in and is kept there, Escape or a click outside closes it, and focus returns to the trigger. With reduced motion the morph is skipped.

FloatingPanelTrigger and FloatingPanelClose take Button's variant, size and shape.

Examples

Action list