FX · Components

A toolbar of icon buttons that swell as the pointer passes over them.

bash
npx shadcn@latest add https://www.rad-ui.com/r/dock.json
React
import Dock from "@/components/fx/dock"

<Dock label="Apps" items={[
    { label: "Home", icon: <Home />, onSelect: goHome },
    { label: "Search", icon: <Search />, onSelect: openSearch }
]} />
  • role="toolbar" with one Tab stop; arrow keys, Home and End move between items.
  • Every button has an accessible name; the floating label is visual only.
  • The focused item magnifies, so keyboard users see where they are.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) disables magnification.
PropTypeDefaultDescription
items
{ label, icon, onSelect? }[]
—

Toolbar items.

label
string
'Dock'

Accessible name for the toolbar.

magnification
number
0.6

Extra scale under the pointer.

Edit this page on GitHub →