A dock is a row of icons that magnify as the pointer passes. It is borrowed directly from macOS, it is one of the most satisfying interactions on the web, and it is a navigation pattern whose entire affordance depends on a pointer that half your readers do not have.
41 public components on 21st have "dock" in the name. Worth understanding both why it feels good and where it stops working.
The components
Dock by ibelick is the most-taken one and the most general. macOS Dock by briidgedotone is the faithful reproduction, Dock by Anurag Mishra and Animated Dock by preetsuthar17 are the animated variants, and Dock by Ruixen UI is the glassmorphic take.
Dock Tabs by Ali Imam merges the shape with tabs, and Message Dock by Isaiah is the expandable messaging variant.
Why the magnification feels right
The effect is not linear. Each icon's scale is a function of its distance from the pointer, falling off smoothly, so neighbours grow a little while the one under the cursor grows a lot. That falloff is what makes it read as a physical surface rather than as a hover state.
Two implementation details carry most of the quality. Track the pointer on the container and compute each icon's distance from one value, rather than attaching a listener per icon - the same rule the spotlight guide applies. And spring the scale rather than easing it, so the row settles instead of snapping when the pointer leaves.
Where it stops working
Touch. There is no hover, so the magnification never happens and the dock degrades into a row of small icons. The mobile navigation guide covers what to use instead: a bottom bar with real targets of at least 44 by 44 points.
Labels. Icon-only navigation is a memory test, and a tooltip on hover does not solve it for touch or for keyboards. If the dock is real navigation rather than a flourish, the items need visible labels or the destinations need to be genuinely universal icons.
Keyboard. A dock is a set of links or buttons and must be reachable in order with a visible focus state. The magnification is decoration; focus is the affordance that has to work without it.
Count. The effect needs neighbours to look right, so a dock of three items reads as a strange row of buttons. Six to ten is where it works.
Where a dock actually belongs
As a secondary surface rather than as primary navigation: a toolbar of actions, a switcher between views, a playful footer on a personal site. On those it adds character without carrying the responsibility of getting people around the product.
As primary navigation on a marketing site it is a pill with fewer labels, and the floating navbar guide covers that shape with its own constraint - about four destinations before it stops being one.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS transforms and one pointer handler | The whole effect in a few dozen lines | You write the falloff and the spring |
| Motion | Spring physics that settle properly | A runtime for one interaction |
| A bottom bar with labels | Actual mobile navigation | No magnification, which is the point |
| 21st | Faithful docks, animated variants and expandable ones | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Browse navigation components →
Frequently asked
- Why does dock magnification feel physical?
- Because the scale is a falloff function of each icon's distance from the pointer rather than a binary hover state, so neighbours grow a little while the one under the cursor grows a lot. Springing the scale rather than easing it is what makes the row settle instead of snapping.
- Is a dock good navigation?
- As a secondary surface, yes: a toolbar of actions, a view switcher, a playful footer. As primary navigation it is icon-only, which is a memory test, and its whole affordance depends on a pointer, so on touch it degrades into a row of small targets.
- How many items should a dock have?
- Six to ten. The magnification needs neighbours to read correctly, so a dock of three looks like a strange row of buttons, and past ten the targets get too small once they are not magnified.
- What does a dock need for keyboards?
- The items are links or buttons and must be reachable in order with a visible focus indicator. The magnification is decoration; focus is the affordance that has to work without a pointer at all.