A floating tool dock for canvas apps. It holds the current tool on an ink plate and redocks to any edge.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/toolbarPlayground
Docked left
Dock
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/toolbar
Accessibility
- Uses role toolbar, roving focus and aria-pressed.
- Every tool has a name and aria-keyshortcuts.
Motion
- The ink plate slides between tools on a spring.
- Tooltips wait, then neighbours show at once.
- The flyout scales from the tool in 160 ms.
- Drag the grip and drop zones fade in. On release the dock flies to the nearest edge and reflows.
- With reduced motion, the plate jumps and the dock moves at once.
Responsive behavior
- Tools are 32 on Web and 40 on Mobile, with no grip on Mobile.
- The flyout is 200 wide on Web and 220 on Mobile.
Performance
- The current tool's plate is one shared layout element.
- Flyouts and drop zones mount only while they show.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import Toolbar and CANVAS_TOOLS from @/components/fetaui/toolbar after installing it. tools is required.
- Place it in a relatively positioned canvas: docking and shortcuts both use its parent.
- An entry is a tool or { divider: true }, and options makes a flyout whose last pick becomes the icon.
- Single key shortcuts answer only while pointer or focus is on the canvas, never in a text field. Composes Tooltip and Kbd.
Related
Marking MenuComponentA radial menu for people who learn it. Hold for eight targets, or flick the same way to pick without looking.TooltipComponentA short label that names a control on hover, focus or long press, in Ink, Soft or a rich tab shape.KbdComponentA keycap for showing keyboard input. One key per cap, grouped as a combo, chord or sequence.MenubarComponentA persistent row of menus, like a desktop app. The open tab slides between triggers, and holding Alt shows every access key.Toggle GroupComponentToggles on one tray, for a single choice or several.