āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/adityakishore0/scrollx-ui/components/magicdock ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ComponentPreview name="magicdock-demo" className="" description="Animated dock with smooth animations, interactive hover effects" />
<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />
<Step>Copy and paste the following code into your project.</Step>
<p> <code>magicdock.tsx</code> </p> <ComponentSource name="magicdock" /> </Steps> </TabsContent> </Tabs>import StylishDock from "@/components/ui/magicdock";
import { Home as HomeIcon, Settings as SettingsIcon } from "lucide-react";
const dockItems = [
{
id: 1,
icon: <HomeIcon size={24} />,
label: "Home",
description: "Go to homepage",
onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
},
{
id: 2,
icon: <SettingsIcon size={24} />,
label: "Settings",
description: "Customize options",
onClick: () => console.log("Settings clicked"),
},
];
function App() {
return (
<div className="relative">
<StylishDock
items={dockItems}
distance={150}
panelHeight={64}
baseItemSize={50}
magnification={70}
variant="default"
/>
</div>
);
}
import StylishDock from "@/components/ui/magicdock";
import { Home as HomeIcon, Docs as DocsIcon } from "lucide-react";
import { useRouter } from "next/navigation";
const dockItems = [
{
id: 1,
icon: <HomeIcon size={24} />,
label: "Home",
description: "Go to homepage",
onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
},
{
id: 2,
icon: <DocsIcon size={24} />,
label: "Docs",
description: "Read documentation",
onClick: () => router.push("/docs"),
},
];
function App() {
return (
<div className="relative">
<StylishDock
items={dockItems}
distance={150}
panelHeight={64}
baseItemSize={50}
magnification={70}
variant="tooltip"
/>
</div>
);
}
// Default variant
<MagicDock items={dockItems} variant="default" />
// Gradient variant
<MagicDock items={dockItems} variant="gradient" />
// Tooltip variant with custom magnification
<MagicDock
items={dockItems}
variant="tooltip"
magnification={90}
baseItemSize={60}
/>
The MagicDock component provides a customizable, animated dock.
<PropsTable
rows={[
{
prop: "items",
type: "DockItemData[]",
default: "required",
description: "Array of dock items with id, icon, label, description, and onClick."
},
{
prop: "className",
type: "string",
default: "ā",
description: "Custom classes for the dock container."
},
{
prop: "distance",
type: "number",
default: "150",
description: "Distance used for magnification effect."
},
{
prop: "panelHeight",
type: "number",
default: "64",
description: "Fixed height of the dock panel."
},
{
prop: "baseItemSize",
type: "number",
default: "50",
description: "Base size of each dock item."
},
{
prop: "dockHeight",
type: "number",
default: "256",
description: "Max height of the expanded dock."
},
{
prop: "magnification",
type: "number",
default: "70",
description: "Max size increase on item hover."
},
{
prop: "spring",
type: "{ mass: number; stiffness: number; damping: number }",
default: { mass: 0.1, stiffness: 150, damping: 12 },
description: "Spring animation config for item movement."
},
{
prop: "variant",
type: "default" | "gradient" | "tooltip",
default: "default",
description: "Visual style of the dock."
}
]}
/>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā