Installation
pnpm dlx rareui add floating-dock
Usage
1
Basic Usage
Example
import FloatingNavigation from '@/components/ui/floating-dock';
import { Home, User, Settings } from 'lucide-react';
const items = [
{ id: 'home', label: 'Home', icon: <Home /> },
{ id: 'profile', label: 'Profile', icon: <User /> },
{ id: 'settings', label: 'Settings', icon: <Settings /> }
];
export default function App() {
return <FloatingNavigation items={items} />;
}Features
Seamlessly integrated and optimized for high-performance React applications.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavItem[] | defaultItems | List of navigation items with id, label, and icon. |
className | string | - | Additional CSS classes for positioning and styling. |