# Dock — Skecher UI

A macOS-style magnifying dock powered by shared motion values and spring-smoothed icon sizing.

## Install

```bash
bunx --bun shadcn@latest add CoDesign-Spa27/skecher-ui/dock
```

## Dependencies

- motion

## Implementation guidance

- No additional implementation constraints are documented.

## Usage

```tsx
"use client";

import { Bell, Home, Search, Settings } from "lucide-react";

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

const iconClassName = "size-full";

export default function DockExample() {
  return (
    <Dock
      items={[
        { id: "home", label: "Home", icon: <Home className={iconClassName} /> },
        { id: "search", label: "Search", icon: <Search className={iconClassName} /> },
        {
          id: "notifications",
          label: "Notifications",
          icon: <Bell className={iconClassName} />,
          onClick: () => window.alert("Notifications opened"),
        },
        { id: "settings", label: "Settings", icon: <Settings className={iconClassName} /> },
      ]}
      baseSize={44}
      maxSize={76}
      influence={130}
      className="mx-auto"
    />
  );
}
```

## Source files

- components/ui-components/dock.tsx — Magnifying dock component

## Canonical resources

- Documentation: https://skecher-ui.com/docs/dock
- Registry item with complete source: https://skecher-ui.com/r/dock.json
- Component AI context: https://skecher-ui.com/llms/dock