║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

export const metadata = { title: 'Dock - Motion-Primitives', description: 'A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application. Built for React, Next.js, and Tailwind CSS.', };

import { AppleStyleDock } from './apple-style-dock'; import ComponentCodePreview from '@/components/website/component-code-preview';

Dock

A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

Examples

Apple style dock

<ComponentCodePreview component={<AppleStyleDock />} filePath='app/docs/dock/apple-style-dock.tsx' hasReTrigger />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value='cli'>CLI</TabsTrigger> <TabsTrigger value='manual'>Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <InstallationCli value='dock' /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath='components/core/dock.tsx' />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

Dock

| Prop | Type | Default | Description | | :------------ | :------------ | :------------------------------------------- | :--------------------------------------------------------------------------------------- | | children | ReactNode | | The child elements to be animated. | | className | string | undefined | Optional CSS class for styling the component. | | spring | SpringOptions | { mass: 0.1, stiffness: 150, damping: 12 } | Spring options from motion for animation effects. | | magnification | number | 80 | The scaling factor applied to a dock item on hover. | | distance | number | 150 | The distance from the center of a dock item at which the magnification animation starts. | | panelHeight | number | 64 |

DockItem

| Prop | Type | Default | Description | | :-------- | :--------- | :-------- | :--------------------------------------------------------- | | children | ReactNode | | DockLabel and DockIcon | | className | string | undefined | Optional CSS class for styling the component. | | onClick | () => void | undefined | Optional click handler triggered when the item is clicked. |

DockLabel

| Prop | Type | Default | Description | | :-------- | :-------- | :-------- | :---------------------------------------------------------- | | children | ReactNode | | Content of the label, typically a string or formatted text. | | className | string | undefined | Optional CSS class for styling the component. |

DockIcon

| Prop | Type | Default | Description | | :-------- | :-------- | :-------- | :-------------------------------------------- | | children | ReactNode | | Icon | | className | string | undefined | Optional CSS class for styling the component. |

Credits

Created by @kashyap20, inspired by Build UI - Magnified Dock

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║