Dock | Ruixen UI

Installation

Usage

import Dock from "@/components/ruixen/dock";
import { Home, Search, Bell, User, Settings } from "lucide-react";
 
const dockItems = [
  {
    icon: <Home className="h-6 w-6" />,
    label: "Home",
    onClick: () => console.log("Home"),
  },
  {
    icon: <Search className="h-6 w-6" />,
    label: "Search",
    onClick: () => console.log("Search"),
  },
  {
    icon: <Bell className="h-6 w-6" />,
    label: "Notifications",
    onClick: () => console.log("Notifications"),
  },
  {
    icon: <User className="h-6 w-6" />,
    label: "Profile",
    onClick: () => console.log("Profile"),
  },
  {
    icon: <Settings className="h-6 w-6" />,
    label: "Settings",
    onClick: () => console.log("Settings"),
  },
];
 
export default function App() {
  return <Dock items={dockItems} />;
}

Props

Prop	Type	Default	Description
`items`	`Array<{icon: Component, label: string, onClick?: function}>`	-	Array of dock items
`className`	`string`	`""`	Additional CSS classes

Features

Floating Animation: Gentle up-down floating motion
Arc Layout: Perspective transform creates arc illusion
Hover Effects: Scale and rotate animations on hover
Glow Rings: Animated border rings on hover
Active States: Visual feedback for clicked items
Tooltips: Labels appear on hover

Animations

Floating: 8-second infinite up-down motion
Hover Scale: 1.2x scale with -5° rotation
Glow Ring: Animated border with primary color
Active Dot: Small dot indicator for active items

Layout

The dock uses CSS perspective to create an arc layout illusion:

transform: perspective(600px) rotateX(10deg);