A floating tool palette with a springy active pill, a hover highlight that glides between tools and tooltips with shortcut keys. Arrow keys move focus and single-letter shortcuts switch tools.
npx shadcn@latest add https://hyperblur.dev/r/button-toolbar-group.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-toolbar-group.tsx.
import { ButtonToolbarGroup } from "@/components/hyperblur/button-toolbar-group"
<ButtonToolbarGroup defaultValue="move" onValueChange={(id) => setTool(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; shortcut?: string; icon?: ReactNode }[] | move, hand, frame, pen, text, comment | Tools in order. |
| value | string | undefined | Controlled active tool id. |
| defaultValue | string | first item | Initial active tool when uncontrolled. |
| onValueChange | (id: string) => void | undefined | Called when a tool is picked by click or shortcut. |
| orientation | "horizontal" | "vertical" | "horizontal" | Lays the tools out in a row or a column. |
| tooltipSide | "top" | "bottom" | "right" | "left" | top, or right when vertical | Where the tooltips appear. |
| shortcuts | boolean | true | Listens for the single-letter shortcuts on the window, ignoring text fields. |
| label | string | "Tools" | Accessible label of the toolbar. |
| accent | string | "#2f7bff" | Active pill color. |