Floating Toolbar

A polished specific-use toolbar featuring smooth shared-element transitions for tooltips and active states, creating a seamless and fluid user interaction experience.

Preview

Selected: Comment

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/floating-toolbar.json

Usage

Import the component:

import { FloatingToolbar } from "@/components/floating-toolbar"

Use it in your code:

const items = [
  { id: "comment", label: "Comment", icon: <Icon1 />, shortcut: "C" },
  { id: "settings", label: "Settings", icon: <Icon2 />, shortcut: "S" }
];

<FloatingToolbar items={items} onSelect={(id) => console.log(id)} />

Props

Property	Type	Default	Description
`items*`	`Array`	`[]`	Array of items with { id, label, icon, shortcut }.
`onSelect`	`function`	`-`	Callback when an item is selected.
`className`	`string`	`-`	Optional CSS classes.