Dock

A shelf of glass whose icons swell toward the pointer with sprung falloff. Keyboard focus magnifies too; reduced motion keeps the shelf flat.

Install

$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/dock.json

Examples

Default

"use client";

import {
  FolderIcon,
  ImageIcon,
  MailIcon,
  MusicIcon,
  TerminalIcon,
  Trash2Icon,
} from "lucide-react";

import { Dock, DockItem, DockSeparator } from "@/components/ui/dock";

export function DockDemo() {
  return (
    <Dock>
      <DockItem label="Files">
        <FolderIcon />
      </DockItem>
      <DockItem label="Mail">
        <MailIcon />
      </DockItem>
      <DockItem label="Photos">
        <ImageIcon />
      </DockItem>
      <DockItem label="Music">
        <MusicIcon />
      </DockItem>
      <DockItem label="Terminal">
        <TerminalIcon />
      </DockItem>
      <DockSeparator />
      <DockItem label="Trash">
        <Trash2Icon />
      </DockItem>
    </Dock>
  );
}

API

<DockItem />

Prop	Type	Default	Description
label	string	—	Accessible name (required).