caliper uidocs
DemoSign inGet Pro

Dock

Free

A floating dock of icon destinations with a gliding active pill.

Installs components/ui/dock.tsxDepends on @radix-ui/react-tooltipMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/dock.json

When to use #

Use it for

  • A small set of primary destinations in a showcase or mobile shell.
  • Icon-only navigation with tooltips.

Skip it when

  • More than seven destinations; use a sidebar.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/dock.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Home, Inbox, Search as SearchIcon, Settings } from "lucide-react"
import { useState } from "react"
import { Dock } from "@/components/ui/dock"
import { Search } from "@/components/ui/search"

export function WorkspaceDock() {
  const [active, setActive] = useState("home");
  return (
    <Dock
      label="Workspace dock"
      value={active}
      onValueChange={setActive}
      items={[
        { id: "home", label: "Home", icon: <Home aria-hidden="true" /> },
        { id: "inbox", label: "Inbox", icon: <Inbox aria-hidden="true" /> },
        { id: "search", label: "Search", icon: <SearchIcon aria-hidden="true" /> },
        { id: "settings", label: "Settings", icon: <Settings aria-hidden="true" />, separatorBefore: true },
      ]}
    />
  );
}

API reference #

Dock

component
PropTypeDefault
items *readonly DockItem[]—
label *string—
valuestring—
onValueChange *(id: string) => void—
classNamestring—

Accessibility #

It exposes toolbar and separator semantics, with aria-label and aria-pressed kept in step with state.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
→Moves to the next item or value.
←Moves to the previous item or value.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.