Dock
A macOS-style dock component with gaussian magnification effects, smooth tooltips, and spring animations.
Installation
Usage
import { Dock } from "viora-ui";import { Dock } from "viora-ui";
export default function DockDemo() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center p-6">
<Dock />
</div>
);
}API Reference
DockItem
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | Configuration for icon. |
| label | string | - | Configuration for label. |
| href? | string | - | Configuration for href. |
| onClick? | () => void | - | Callback fired on click event. |
| separator? | boolean | false | Configuration for separator. |
Dock
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockItem[] | [] | List of items to render. |
| magnification? | number | - | Configuration for magnification. |
| distance? | number | - | Configuration for distance. |
| iconSize? | number | - | Configuration for iconSize. |
| gap? | number | - | Configuration for gap. |
| borderRadius? | number | - | Configuration for borderRadius. |
| alwaysShowLabels? | boolean | false | Configuration for alwaysShowLabels. |
| springOptions? | SpringOptions | - | Configuration for springOptions. |
| className? | string | "" | Additional CSS classes for custom styling. |
| autoPlay? | boolean | false | Whether to automatically cycle through items. |
Built by Otis
Last updated: 10/12/2026