Dock Tray

Installation

pnpm dlx shadcn@latest add @cleverui/dock-tray

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { DockTray } from '@/components/ui/dock-tray'

Exampletsx

import { Bell, Home, Search, Settings, SquarePen, User } from 'lucide-react'
import { DockTray } from '@/components/ui/dock-tray'

const items = [
  { label: 'Home', href: '#home', icon: <Home strokeWidth={1.75} /> },
  { label: 'Search', href: '#search', icon: <Search strokeWidth={1.75} /> },
  { label: 'Compose', href: '#compose', icon: <SquarePen strokeWidth={1.75} /> },
  { label: 'Alerts', href: '#alerts', icon: <Bell strokeWidth={1.75} /> },
  { label: 'Profile', href: '#profile', icon: <User strokeWidth={1.75} /> },
  { label: 'Settings', href: '#settings', icon: <Settings strokeWidth={1.75} /> },
]

export default function DockTrayDemo() {
  return (
    <div className="relative mx-auto min-h-[420px] max-w-3xl px-4 py-12 sm:px-6">
      <div className="mx-auto max-w-md text-center">
        <p className="text-muted-foreground font-mono text-[11px] uppercase tracking-[0.2em] sm:text-xs">
          Atlas workspace
        </p>
        <h2 className="text-foreground mt-3 text-balance text-2xl font-semibold tracking-tight sm:text-3xl">
          Six destinations. One restrained dock.
        </h2>
        <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
          Hover to magnify, arrow keys to move, labels and the accent mark stay
          available either way.
        </p>
      </div>

      <div className="pointer-events-none absolute inset-x-0 bottom-8 flex justify-center sm:bottom-10">
        <div className="pointer-events-auto">
          <DockTray items={items} ariaLabel="Atlas utility dock" />
        </div>
      </div>
    </div>
  )
}

The example itself also uses lucide-react , install it too if you copy the example as-is (the component itself does not need it).

API reference

DockTray accepts the following props.

Prop	Type	Default	Description
`items`*	`DockTrayItem[]`	–	4–7 utility destinations
`ariaLabel`	`string`	`'Utility dock'`	accessible name for the nav landmark
`magnification`	`number`	`1.35`	peak scale under the pointer, hard-clamped to 1.4

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface DockTrayItem {
  label: string
  href: string
  icon: React.ReactNode
}

Related components

Hover Peek Link

Inline link that floats a structural preview card on hover or focus, title, description, and meta from props, with intent delay, close grace, and viewport-edge flip.

Flow Stepper

Controlled multi-step progress stepper, numbered nodes on a hairline spine, completed ticks that draw in, a current node that pulses exactly once, and real links when steps navigate.

Physics Underline Tabs

The classic underline tabs with real physics, the active bar travels on an underdamped spring with velocity-linked squash and one visible overshoot, over correct APG tablist semantics.

Ledger Accordion

A standalone accordion in the ruled-ledger voice, mono indices, right-aligned mono meta figures, hairline rows, and a primary keyline beside the open region. A content container, not a FAQ.

Beam Balance

A working two-pan beam balance for React, place mono weight chips on either pan, the beam tips with damped torque physics, and equilibrium earns the lamp. Tailwind tokens.

Centrifugal Governor

A working centrifugal governor for React, drive the power lever, flyweights rise and the valve trims the spin until it settles governed. ARIA slider semantics, Tailwind tokens.

Frequently asked questions

How do I install the Dock Tray component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/dock-tray`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Dock Tray require?

Dock Tray uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Dock Tray to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code