Selection Toolbar

Wraps content and floats a pill toolbar above any text the user selects inside it — the pill scales in with one soft drift breath, anchored to the selection rect.

Select any stretch of this paragraph and a pill toolbar floats in above your selection, anchored to its exact rectangle. It scales in with one soft breath and leaves when the selection collapses.

Try selecting the text above.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add selection-toolbar

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { SelectionToolbar } from "@lumora/ui/ai/selection-toolbar";
// or from the barrel:
import { SelectionToolbar } from "@lumora/ui";

Props worth knowing

Wrap the content to listen to; actions ({ id, label, icon? }) fill the pill, and onAction receives the action id plus the selected text. Collapsing the selection, scrolling, or Escape dismisses it. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.