Floating Panel

Used to display content in a non-modal floating window

Installation


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

Usage


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


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

Examples

Default

On This Page

Installation Usage Examples Default