Selection Toolbar

Medium-Style Text Selection

Select any text in this area to see the floating toolbar appear. The toolbar automatically positions itself above the selection and includes common formatting options like bold, italic, and link, as well as utility actions like copy and share.

Try selecting text across multiple lines or near the edges of the viewport. The menu will automatically adjust its position to stay visible and accessible. This creates a seamless editing experience similar to popular writing platforms.

Installation

pnpm dlx shadcn@latest add @diceui/selection-toolbar

Layout

Import the parts, and compose them together.

import {
  SelectionToolbar,
  SelectionToolbarItem,
  SelectionToolbarSeparator,
} from "@/components/ui/selection-toolbar";
 
return (
  <SelectionToolbar>
    <SelectionToolbarItem />
    <SelectionToolbarSeparator />
  </SelectionToolbar>
)

Examples

Selection Info

Track selection information with the onSelectionChange callback to display word count, character count, and other metrics.

Selection Info Tracking

Select any text to see the toolbar and track selection information below. The component provides callbacks to monitor selected text and implement custom behavior.

Try selecting different portions of text to see real-time updates of the word count and character count. This demonstrates how you can track and respond to selection changes.

API Reference