Skip to content

shadcn.io is an independent project built on shadcn/ui

Components

Free

Dock for React

A row of app icons that grow as the pointer nears and ease aside, with a label and an open dot. For React with Base UI, when icons need names.

A row of icons on a shelf that grow as the pointer passes over them, the way the macOS dock does.

Use it for a handful of apps, tools or pages that people know by their icon, with the name shown on hover. For a labeled bar that marks the current section, use Menu Dock. In React, Base UI moves only transforms, so the page around the dock never shifts.

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Dock anatomy: root, item, icon, label, separator
Dock
├── DockItem
│   ├── DockLabel
│   └── DockIcon
└── DockSeparator

Usage

import { HouseIcon, SettingsIcon } from "lucide-react";
import {
  Dock, DockIcon, DockItem, DockLabel,
} from "@/components/ui/dock";
<Dock>
  <DockItem>
    <DockLabel>Home</DockLabel>
    <DockIcon>
      <HouseIcon />
    </DockIcon>
  </DockItem>
  <DockItem>
    <DockLabel>Settings</DockLabel>
    <DockIcon>
      <SettingsIcon />
    </DockIcon>
  </DockItem>
</Dock>

The icons grow upward out of the dock and the label floats above them, so leave room over it: about the difference between magnification and size, plus the label's height.

Demos

macOS

Eight apps and the Trash on a wallpaper, Finder and Safari open. Each DockItem has active for the dot under an open app and bounce, so a click makes the icon hop while it toggles the app open or closed; aria-pressed says the same to assistive tech. DockSeparator keeps the Trash apart, as macOS does. The tiles are DockIcon with its own className, one in the primary color.

Preview width

Magnification

Two docks of the same six icons. The subtle one grows an icon to 52 pixels within 100 pixels of the pointer, the strong one to 96 within 220. size is an icon at rest, magnification its size under the pointer, and distance how far the growth reaches. A short reach keeps one icon big; a long one lifts several at once.

Preview width

A site's pages as a dock. Each DockItem renders as the link itself, the current page marked with active and aria-current, and a separator before the feed. Use links when an item navigates, and buttons for actions, never a link inside a button.

Preview width

Avatars

A team as round photos. DockIcon holds an image and takes rounded-full, and the dot marks who is online. The label carries the name, because the photo has no words; keep the image's alt empty so the name isn't read twice.

Preview width

FAQ

How do I change how much the Dock magnifies?

Three numbers on Dock, all in pixels. size is an icon at rest (48), magnification its size right under the pointer (80), and distance how far from the pointer an icon still grows (140). The growth falls off on a cosine curve, so the icon under the pointer is the biggest and its neighbours ease aside to make room. The Magnification demo puts a subtle and a strong setting side by side.

How do I show which apps are open in the Dock?

Set active on a DockItem to draw the dot under its icon, as macOS marks an open app. Add bounce and a click makes the icon hop once. The macOS demo toggles both from a list of open apps in state, and sets aria-pressed so the state is announced, not only drawn.

Can I use the Dock from the keyboard?

Yes. The Dock is a toolbar with one tab stop: Tab lands on the item last focused, the arrow keys move along it (mirrored in right-to-left layouts), and Home and End jump to the ends. The focused icon grows and shows its label as a hovered one does. Enter presses the item, and so does Space when it's a button.

What does the Dock do with reduced motion?

With reduced motion nothing grows, spreads or bounces: the icons keep their size and the labels still appear on hover and focus. Touch never magnifies either, since there is no pointer to follow. The dock works the same way without the effect.

Why does the Dock overlap what's above it?

The icons grow upward with a transform, and transforms take no room in the layout, so the page never jumps while the pointer moves. Give the dock space above it, roughly magnification minus size plus the label's height, or place it at the bottom of the screen as macOS does.

How do I style the Dock with Base UI?

The dock's surface is the root's ::before layer, which widens as the icons spread, so restyle it with before: classes on Dock (before:bg-muted, before:rounded-3xl). Tiles and images go on DockIcon's className, and the label is a plain span you can recolor. Edit the file under components/ui to change every dock at once.

How do I install the Dock in React?

Run the command in the Installation section on this page, which adds Dock, DockItem, DockIcon, DockLabel and DockSeparator to your ui folder. It adds no animation library: the motion is CSS. The command uses the shadcn CLI.

API Reference

Dock

<div> data-slot="dock"

PropType
distance?number

How far from the pointer icons still grow, in pixels.

Default
140
magnification?number

An icon's size right under the pointer, in pixels.

Default
80
size?number

Each icon's size at rest, in pixels.

Default
48
className?string

Merged with the part's classes.

CSS variableType
--dock-scalestring

On each item: how much its icon is grown now.

--dock-shiftstring

On each item: how far it's moved aside now.

--dock-sizestring

Each icon's size at rest (from size).

DockItem

<button> data-slot="dock-item"

PropType
active?boolean

Shows the dot under the icon, as macOS marks an app that's open.

Default
false
bounce?boolean

Whether the icon bounces when clicked, as an app does when it opens.

Default
false
asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

AttributeType
data-active?string

Present when active is true.

CSS variableType
--dock-scalestring

On each item: how much its icon is grown now.

--dock-shiftstring

On each item: how far it's moved aside now.

--dock-sizestring

Each icon's size at rest (from size).

DockIcon

<span> data-slot="dock-icon"

PropType
className?string

Merged with the part's classes.

CSS variableType
--dock-scalestring

On each item: how much its icon is grown now.

--dock-shiftstring

On each item: how far it's moved aside now.

--dock-sizestring

Each icon's size at rest (from size).

DockLabel

<span> data-slot="dock-label"

PropType
className?string

Merged with the part's classes.

CSS variableType
--dock-scalestring

On each item: how much its icon is grown now.

--dock-shiftstring

On each item: how far it's moved aside now.

--dock-sizestring

Each icon's size at rest (from size).

DockSeparator

<hr> data-slot="dock-separator"

PropType
className?string

Merged with the part's classes.

CSS variableType
--dock-scalestring

On each item: how much its icon is grown now.

--dock-shiftstring

On each item: how far it's moved aside now.

--dock-sizestring

Each icon's size at rest (from size).

With other components

All 174 components