# Dock

> A compact action dock with a shared animated active indicator.

Source: https://www.honestui.com/docs/animated/dock

```tsx
"use client";

import { Bell, House as Home, Search, Settings } from "honestui/icons";
import { useState } from "react";

import { Dock, DockItem, DockSeparator } from "@/registry/default/animated/dock";

const items = [
  { id: "dashboard", label: "Dashboard", icon: Home },
  { id: "browse", label: "Browse", icon: Search },
  { id: "updates", label: "Updates", icon: Bell },
];

export function DockDemo() {
  const [active, setActive] = useState("dashboard");

  return (
    <Dock>
      {items.map(({ id, label, icon: Icon }) => (
        <DockItem key={id} active={active === id} onClick={() => setActive(id)} aria-label={label}>
          <Icon className="size-5" />
        </DockItem>
      ))}
      <DockSeparator />
      <DockItem onClick={() => setActive("preferences")} active={active === "preferences"} aria-label="Preferences">
        <Settings className="size-5" />
      </DockItem>
    </Dock>
  );
}

```

## Overview [#overview]

Dock groups a small set of high-frequency destinations or actions. The active pill moves between items using shared-layout motion while item dimensions remain stable.

## Installation [#installation]

<CliBlock commands="[&#x22;dock&#x22;]" />

## Usage [#usage]

```tsx
import { Dock, DockItem, DockSeparator } from "@/components/animated/dock"

<Dock>
  <DockItem active onClick={openDashboard} aria-label="Dashboard"><Home /></DockItem>
  <DockSeparator />
  <DockItem onClick={openPreferences} aria-label="Preferences"><Settings /></DockItem>
</Dock>
```

## Accessibility [#accessibility]

Items with `onClick` render as buttons and expose `aria-pressed` for the active state. Icon-only items require an `aria-label`. Keep the dock to a short, recognizable action set.

## API Reference [#api-reference]


  ### `size`

type: `number` · default: `44`

Width and height of each Dock Item in pixels.

  ### `active`

type: `boolean`

Shows the shared active indicator.

  ### `onClick`



void">
    Renders the item as a button and handles activation.

  ### `aria-label`

type: `string`

Accessible name for an icon-only item.