Arrow keys move along the rail. The lit tube marks this page.
);
}
```
### Without magnification
magnification={1} keeps every icon still, for a canvas toolbar.
```tsx
"use client";
import * as React from "react";
import { Hand, Image as ImageIcon, MousePointer2, PenTool, Shapes, Type } from "@/components/ui/icons";
import { Dock, DockItem, DockSeparator } from "@/components/ui/dock";
const tools = [
{ id: "select", label: "Select V", icon: MousePointer2 },
{ id: "hand", label: "Hand H", icon: Hand },
{ id: "pen", label: "Pen P", icon: PenTool },
{ id: "text", label: "Text T", icon: Type },
{ id: "shapes", label: "Shapes R", icon: Shapes },
];
// A canvas toolbar: no magnification, and the lit tube marks the tool in hand.
export default function DockToolbar() {
const [tool, setTool] = React.useState("pen");
return (
{tools.map((t) => (
setTool(t.id)}
>
))}
);
}
```
## API reference
### Dock
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Horizontal icons grow upward; vertical ones grow to the right. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Icons of 36, 44 or 54px at rest. |
| `magnification` | `number` | `1.6` | The size of the icon under the pointer, as a multiple of its rest size. 1 turns it off. |
| `distance` | `number` | `140` | Pixels from the pointer within which icons grow. |
| `color` | `NeonColor` | `inherited` | Palette name or hex. Falls back to --neon-accent, then cyan. |
### DockItem
A button, or with asChild any element such as a link. Other props go on that element.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | — | Accessible name and tooltip. |
| `running` | `boolean` | `false` | Lights the small tube under the icon. |
| `runningLabel` | `string` | `"open"` | What screen readers hear for running, as the item's description. |
| `badge` | `ReactNode` | — | A count or short word in a lit pill on the corner. |
| `badgeColor` | `NeonColor` | `"red"` | Color of the badge. |
| `asChild` | `boolean` | `false` | Renders the child element as the item. Base UI's render prop works too. |
| `disabled` | `boolean` | `false` | Dims the item and skips it in keyboard navigation. |
### DockSeparator
A hairline between groups of items.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
## Accessibility
- The dock is a toolbar with one tab stop. Arrow keys along its axis move focus, Home and End jump to the ends, and keyboard moves never magnify.
- Touch input never magnifies, and neither does anything under reduced motion.
- Give the dock an aria-label. Badges and the running state are read as each item's description.
## Source
`components/ui/dock.tsx`
```tsx
"use client";
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import {
motion,
useMotionValue,
useReducedMotion,
useSpring,
useTransform,
type MotionValue,
} from "motion/react";
import { cn } from "@/lib/utils";
import { neonVars, toNeonRgb, type NeonColor } from "@/lib/neon";
type RenderProp = { asChild?: boolean; render?: React.ReactElement; nativeButton?: boolean; children?: React.ReactNode };
/**
* Base UI spells asChild as `render={}` plus `nativeButton`, and the shadcn CLI rewrites
* asChild into that form in base-* projects. Folds it back into asChild and children.
*/
function fromRenderProp
({ render, nativeButton, ...props }: P): Omit {
void nativeButton; // Only meaningful to Base UI.
if (!render) return props;
const children = props.children === undefined ? render : React.cloneElement(render, undefined, props.children);
return { ...props, asChild: true, children };
}
/** The single element in `node`. Server Components can pass it as a lazy reference, which Children resolves. */
function resolveElement(node: React.ReactNode): React.ReactElement | null {
const [child] = React.Children.toArray(node);
return React.isValidElement(child) ? child : null;
}
// Icon size at rest, in pixels. Everything else in the dock is a share of it.
const sizes = { sm: 36, md: 44, lg: 54 } as const;
// Close to critically damped, with just enough give that a fast sweep overshoots a hair.
const SPRING = { mass: 0.3, stiffness: 300, damping: 22 };
// Hover and keyboard focus strike the icon's tube. A class in a style tag, because a
// stacked hover-plus-descendant variant compiles differently on Tailwind 3 and 4.
const css = `
.nk-dock-tile svg { transition: filter 200ms cubic-bezier(0.23, 1, 0.32, 1), color 200ms; }
.nk-dock-tile:hover:not([data-disabled]), .nk-dock-tile:focus-visible { color: color-mix(in srgb, rgb(var(--neon)) 40%, white); border-color: rgb(var(--neon) / 0.32); }
.nk-dock-tile:hover:not([data-disabled]) svg, .nk-dock-tile:focus-visible svg {
filter: drop-shadow(0 0 1.5px rgb(var(--neon) / var(--neon-glow, 1))) drop-shadow(0 0 7px rgb(var(--neon) / calc(0.7 * var(--neon-glow, 1))));
}
@media (prefers-reduced-motion: reduce) { .nk-dock-tile, .nk-dock-tile svg { transition: none; } }
`;
type DockContextValue = {
pointer: MotionValue;
vertical: boolean;
base: number;
peak: number;
distance: number;
magnify: boolean;
tabStop: string | null;
setTabStop: (id: string) => void;
};
const DockContext = React.createContext(null);
function useDock() {
const context = React.useContext(DockContext);
if (!context) throw new Error(" and must be used inside .");
return context;
}
const itemSelector = "[data-dock-item]:not([data-disabled])";
export interface DockProps
extends Omit, "color"> {
/** Horizontal docks grow upward from the bottom edge; vertical ones grow right from the left edge. */
orientation?: "horizontal" | "vertical";
/** Icon size at rest: 36, 44 or 54px. */
size?: keyof typeof sizes;
/** How big the icon under the pointer gets, as a multiple of its resting size. 1 turns it off. */
magnification?: number;
/** Pixels from the pointer within which icons grow. */
distance?: number;
/** Palette name or any hex color. Inherits `--neon-accent` when omitted. */
color?: NeonColor;
}
const Dock = React.forwardRef(
(
{
className,
style,
orientation = "horizontal",
size = "md",
magnification = 1.6,
distance = 140,
color,
children,
onPointerMove,
onPointerLeave,
onPointerDown,
onKeyDown,
...props
},
ref,
) => {
const rootRef = React.useRef(null);
React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);
const pointer = useMotionValue(Infinity);
const reduce = useReducedMotion();
const vertical = orientation === "vertical";
const base = sizes[size];
const magnify = !reduce && magnification > 1;
const [tabStop, setTabStop] = React.useState(null);
// One item is in the Tab order. Until the dock mounts every item is, so it works before hydration.
React.useEffect(() => {
const items = rootRef.current?.querySelectorAll(itemSelector);
if (!items?.length) return;
const ids = Array.from(items, (item) => item.dataset.dockId);
if (tabStop === null || !ids.includes(tabStop)) setTabStop(ids[0] ?? null);
}, [tabStop, children]);
const context = React.useMemo(
() => ({
pointer,
vertical,
base,
peak: base * Math.max(1, magnification),
distance,
magnify,
tabStop,
setTabStop,
}),
[pointer, vertical, base, magnification, distance, magnify, tabStop],
);
const handleKeyDown = (event: React.KeyboardEvent) => {
onKeyDown?.(event);
if (event.defaultPrevented) return;
const forward = vertical ? "ArrowDown" : "ArrowRight";
const back = vertical ? "ArrowUp" : "ArrowLeft";
if (![forward, back, "Home", "End"].includes(event.key)) return;
const items = Array.from(rootRef.current?.querySelectorAll(itemSelector) ?? []);
if (!items.length) return;
const index = items.findIndex((item) => item === document.activeElement || item.contains(document.activeElement));
let next = index;
if (event.key === forward) next = index < 0 ? 0 : (index + 1) % items.length;
if (event.key === back) next = index < 0 ? items.length - 1 : (index - 1 + items.length) % items.length;
if (event.key === "Home") next = 0;
if (event.key === "End") next = items.length - 1;
event.preventDefault();
const target = items[next];
// Moving by keyboard never magnifies: the pointer's influence is dropped.
pointer.set(Infinity);
target.focus();
if (target.dataset.dockId) setTabStop(target.dataset.dockId);
};
const pad = Math.round(base * 0.2);
return (
{
onPointerMove?.(event);
// Touch has no hover, so there's nothing to magnify toward.
if (!magnify || event.pointerType === "touch") return;
pointer.set(vertical ? event.clientY : event.clientX);
}}
onPointerLeave={(event) => {
onPointerLeave?.(event);
pointer.set(Infinity);
}}
onPointerDown={(event) => {
onPointerDown?.(event);
if (event.pointerType === "touch") pointer.set(Infinity);
}}
onKeyDown={handleKeyDown}
{...props}
>
{children}
);
},
);
Dock.displayName = "Dock";
export interface DockItemProps
extends React.ButtonHTMLAttributes {
/** The item's name: its accessible name and the tooltip. */
label: string;
/** Light the small tube under the icon, like an app that's open. */
running?: boolean;
/** What screen readers hear for `running`. */
runningLabel?: string;
/** A count or short word in a lit pill on the corner. */
badge?: React.ReactNode;
/** Palette name or hex for the badge. Red by default. */
badgeColor?: NeonColor;
/** Render the child element (e.g. a link) as the item. */
asChild?: boolean;
/** Base UI-style asChild: `render={}`. */
render?: React.ReactElement;
/** Accepted for Base UI compatibility; no effect. */
nativeButton?: boolean;
}
const DockItem = React.forwardRef((raw, ref) => {
const {
className,
label,
running = false,
runningLabel = "open",
badge,
badgeColor,
asChild = false,
disabled = false,
children,
onFocus,
...props
} = fromRenderProp(raw);
const dock = useDock();
const id = React.useId();
const slotRef = React.useRef(null);
const { pointer, vertical, base, peak, distance, magnify } = dock;
// Distance from the pointer to this icon's centre, measured live so the
// neighbours make room as it grows.
const offset = useTransform(pointer, (at) => {
const node = slotRef.current;
if (!node || !Number.isFinite(at)) return Infinity;
const box = node.getBoundingClientRect();
return at - (vertical ? box.top + box.height / 2 : box.left + box.width / 2);
});
const target = useTransform(offset, [-distance, 0, distance], [base, peak, base], { clamp: true });
const extent = useSpring(target, SPRING);
const Comp = asChild ? Slot : "button";
const child = asChild ? (resolveElement(children) ?? children) : children;
const describedBy = [badge != null && `${id}-badge`, running && `${id}-running`].filter(Boolean).join(" ") || undefined;
return (
) => {
onFocus?.(event);
dock.setTabStop(id);
}}
className={cn(
"nk-dock-tile relative grid size-full cursor-pointer place-items-center rounded-[27%] border border-white/[0.09] text-white/75 outline-none",
"bg-[linear-gradient(180deg,#1c1f28,#0e1015)] shadow-[inset_0_1px_0_rgb(255_255_255/0.08),inset_0_-1px_0_rgb(0_0_0/0.5),0_4px_10px_-4px_rgb(0_0_0/0.85)]",
"transition-[transform,border-color,color] duration-150 ease-out active:scale-[0.92]",
"focus-visible:ring-2 focus-visible:ring-[rgb(var(--neon)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b0d12]",
"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
"[&_svg]:pointer-events-none [&_svg]:size-[52%] [&_svg]:shrink-0",
className,
)}
{...props}
>
{child}
{label}
{badge != null && (
{badge}
)}
{running && (
<>
{runningLabel}
)}
);
});
DockItem.displayName = "DockItem";
/** A hairline between groups of items, like the one before the Trash. */
const DockSeparator = React.forwardRef>(
({ className, style, ...props }, ref) => {
const { vertical, base } = useDock();
return (
);
},
);
DockSeparator.displayName = "DockSeparator";
export { Dock, DockItem, DockSeparator };
```