Dock

Component 9

About

Neumorphism Dock

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dock to your project and fits it to your theme.

Code

How Dock is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Database,
  Brain,
  Cpu,
  Rocket,
  Activity,
  Terminal,
} from "lucide-react"
import { Dock } from "@/components/ui/dock"
import type { DockItem } from "@/components/ui/dock"

const menuItems: DockItem[] = [
  {
    icon: Database,
    label: "Datasets",
    status: "synced",
    count: "2.4TB"
  },
  {
    icon: Brain,
    label: "Models",
    status: "training",
    progress: 67
  },
  {
    icon: Cpu,
    label: "Training",
    status: "active",
    count: "3 GPUs"
  },
  {
    icon: Rocket,
    label: "Deployments",
    status: "online",
    count: "5 active"
  },
  {
    icon: Activity,
    label: "Monitoring",
    status: "alert",
    count: "2 issues"
  },
  {
    icon: Terminal,
    label: "Console",
    status: "idle"
  }
]

export function DockDemo() {
  return (
    <Dock 
      items={menuItems} 
      onAddClick={() => console.log("Add clicked")}
    />
  )
}