Floating Toolbar

A contextual action bar that floats above or below an anchor element.

Hover over this area to show the toolbar

Installation

Add the floating toolbar component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/floating-toolbar.json

Usage

import {
  FloatingToolbar, FloatingToolbarAnchor,
  FloatingToolbarButton, FloatingToolbarSeparator,
} from "@/components/ui/floating-toolbar"

// FloatingToolbarAnchor manages hover state automatically
<FloatingToolbarAnchor>
  <div>Hover me</div>
  <FloatingToolbar>
    <FloatingToolbarButton aria-label="Bold"><BoldIcon /></FloatingToolbarButton>
    <FloatingToolbarSeparator />
    <FloatingToolbarButton aria-label="Link"><LinkIcon /></FloatingToolbarButton>
  </FloatingToolbar>
</FloatingToolbarAnchor>

Examples

Hover trigger

FloatingToolbarAnchor handles hover state — toolbar and content are siblings

Hover over this area to show the toolbar

Code

import { BoldIcon, ItalicIcon, LinkIcon } from "lucide-react"
import {
  FloatingToolbar, FloatingToolbarAnchor,
  FloatingToolbarButton, FloatingToolbarSeparator,
} from "@/components/ui/floating-toolbar"

<FloatingToolbarAnchor>
  <div>Hover me</div>
  <FloatingToolbar>
    <FloatingToolbarButton aria-label="Bold"><BoldIcon /></FloatingToolbarButton>
    <FloatingToolbarButton aria-label="Italic"><ItalicIcon /></FloatingToolbarButton>
    <FloatingToolbarSeparator />
    <FloatingToolbarButton aria-label="Link"><LinkIcon /></FloatingToolbarButton>
  </FloatingToolbar>
</FloatingToolbarAnchor>

Bottom placement

Hover to show toolbar below

Code

<FloatingToolbarAnchor>
  <div>Hover me</div>
  <FloatingToolbar placement="bottom">
    <FloatingToolbarButton aria-label="Bold"><BoldIcon /></FloatingToolbarButton>
  </FloatingToolbar>
</FloatingToolbarAnchor>