Primitivenavigation

Dock

Stable

Uma barra de ícones que crescem quando o ponteiro se aproxima, no estilo do dock do macOS. O Dock só mede e amplia: o que se opera é o controle dentro de cada DockIcon — um link quando leva a algum lugar, um botão quando faz algo —, com nome acessível próprio. O foco por teclado amplia como o ponteiro; toque e movimento reduzido mantêm os ícones no tamanho de repouso.

Instalação

npx up-web-ds add dock

Preview

Basic

With Separator

With Actions

Without Magnification

Direction Bottom

Direction Top

Custom Sizes

All states

Basic

With Separator

With Actions

Without Magnification

Direction Bottom

Direction Top

Custom Sizes

Usage

Imports de Dock

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import { Dock, DockIcon } from '@/components/ui/dock'
import { PlusIcon, SearchIcon, SidebarIcon } from '@/lib/up-web-icons'

Dock

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58function CatalogDock() {
  return (
    <TooltipProvider>
      <nav aria-label="Atalhos do catálogo">
        <Dock>
          <DockIcon>
            <Tooltip>
              <TooltipTrigger
                render={
                  <a
                    href="/preview"
                    aria-label="Buscar no catálogo"
                    className="flex size-full items-center justify-center rounded-full outline-none focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:size-full"
                  />
                }
              >
                <SearchIcon />
              </TooltipTrigger>
              <TooltipContent>Buscar no catálogo</TooltipContent>
            </Tooltip>
          </DockIcon>
          <DockIcon>
            <Tooltip>
              <TooltipTrigger
                render={
                  <a
                    href="/preview/primitives/sidebar"
                    aria-label="Navegação lateral"
                    className="flex size-full items-center justify-center rounded-full outline-none focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:size-full"
                  />
                }
              >
                <SidebarIcon />
              </TooltipTrigger>
              <TooltipContent>Navegação lateral</TooltipContent>
            </Tooltip>
          </DockIcon>
          <DockIcon>
            <Tooltip>
              <TooltipTrigger
                render={
                  <a
                    href="/preview/help"
                    aria-label="Adicionar um componente"
                    className="flex size-full items-center justify-center rounded-full outline-none focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:size-full"
                  />
                }
              >
                <PlusIcon />
              </TooltipTrigger>
              <TooltipContent>Adicionar um componente</TooltipContent>
            </Tooltip>
          </DockIcon>
        </Dock>
      </nav>
    </TooltipProvider>
  )
}

Props

Dock

Props de Dock
Prop	Type	Default	Description
children, obrigatória	`React.ReactNode`	sem valor padrão	The icons: `DockIcon`s, and anything else (a `Separator`) between them.
direction	`"top" \| "bottom" \| "middle"`	`'middle'`	Which edge of the bar the icons grow from: `top` grows downwards, `bottom` grows upwards, `middle` both ways.
disableMagnification	`boolean`	`false`	Keeps every icon at rest size and shows a hover surface instead. Reduced motion does the same on its own.
iconDistance	`number`	`140`	How far from the pointer, in pixels, an icon still grows.
iconMagnification	`number`	`60`	Size an icon grows to when the pointer (or keyboard focus) is on it, in pixels.
iconSize	`number`	`40`	Rest size of every `DockIcon` in the dock, in pixels. Overrides the icons' own `size`.

Estende Omit< React.ComponentProps<'div'>, 'children' | 'onAnimationStart' | 'onDrag' | 'onDragEnd' | 'onDragStart' > & VariantProps<typeof dockVariants>. Aceita também os atributos padrão de um elemento React (275 não listados).

DockIcon

Props de DockIcon
Prop	Type	Default	Description
children	`React.ReactNode`	sem valor padrão	What the icon holds -- the link or button that is the actual control.
className	`string`	sem valor padrão
disableMagnification	`boolean`	sem valor padrão	Keeps the icon at rest size. Inside a `Dock`, the dock's value wins.
distance	`number`	`140`	Reach of the magnification, in pixels. Inside a `Dock`, the dock's `iconDistance` wins.
magnification	`number`	`60`	Size at the pointer, in pixels. Inside a `Dock`, the dock's `iconMagnification` wins.
mouseX	`MotionValue<number>`	sem valor padrão	Horizontal pointer position the icon measures itself against. Supplied by `Dock`.
props	`{ children?: React.ReactNode \| undefined; }`	sem valor padrão	Accepted for upstream compatibility; not rendered.
size	`number`	`40`	Rest size, in pixels. Inside a `Dock`, the dock's `iconSize` wins.

Estende DockIconProps. Aceita também os atributos padrão de um elemento React (335 não listados).

prop obrigatória.

Composition

Todo DockIcon dentro de um Dock recebe dele o tamanho, a ampliação e o ponteiro, e os valores do Dock prevalecem sobre os do ícone; outro filho, como um Separator, é mantido como está.

Composição de Dock

Dock

DockIcon

Metadata

Notas de acessibilidade

Verificado em tests/e2e/dock.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o Dock e o DockIcon não são paradas de tabulação — são o recipiente e o círculo que cresce —, e Tab percorre os controles dentro deles, na ordem visual, com anel de foco visível; o foco visível amplia o ícone como o ponteiro faria, então o anel nunca é a menor coisa da fileira. Isso muda o upstream, onde o DockIcon era um div com cursor-pointer e nenhum papel: o cursor prometia um clique que o padding não entregava, e a mudança está registrada no ingestion record. Leitor de tela verificado por teste e pela árvore de acessibilidade: cada controle tem nome próprio (aria-label, com Tooltip como rótulo visível), o Dock não inventa papel — um dock de links vai dentro de um nav nomeado, um dock de ações recebe role="group" e aria-label —, e o Separator entre grupos é anunciado. Touch verificado em viewport de 375px com emulação de toque: cada controle mede pelo menos 24x24 em repouso, a barra não provoca rolagem horizontal, e um toque não amplia nem deixa um ícone ampliado preso (o upstream reagia ao mousemove sintético do toque e nunca recebia o mouseleave). Reduced motion verificado em navegador com prefers-reduced-motion: reduce e por teste: a ampliação é uma mola em JavaScript, que motion-reduce: não alcança, então a política é useReducedMotion() — os ícones ficam no tamanho de repouso, como com disableMagnification, e a superfície de hover é a resposta.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: navigation
Status: Stable

Origem e distribuição

Fonte: magic registry / dock
Licença: MIT
URL: https://magicui.design/r/dock.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: class-variance-authority, motion
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda