Floating Toolbar
A selection-style floating toolbar with roving tabindex, separator and an overflow menu.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
FloatingToolbarProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children" | "onSelect">
| Prop | Type | Default | Description |
|---|---|---|---|
| anchor* required | ToolbarAnchor | null | — | Rectangle to hover over, relative to the positioned parent. null hides the toolbar. |
| containerWidth* required | number | — | Width of the positioned parent, used to keep the toolbar inside it |
| groups* required | ToolbarAction[][] | — | Groups of actions; a separator is drawn between groups |
| overflow | ToolbarOverflowItem[] | [] | — |
| onAction* required | (id: string) => void | — | — |
| onDismiss | () => void | — | Called when Escape is pressed inside the toolbar |
| label | string | "Text formatting" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/floating-toolbar.json