Floating Dock

A Mac-OS style dock that floats and smoothly scales its items based on mouse proximity. Includes a mobile-responsive expanding menu.

Installation

npx raya-ui@latest add floating-dock

File Structure

your-project

components

floating-dock

FloatingDock.vue

FloatingDockDesktop.vue

FloatingDockMobile.vue

FloatingDockIcon.vue

API Reference

Props

items

Array<{ title: string, icon: Component, href: string }>

Array of items to render in the dock. Each requires a title, a Vue component for the icon (e.g., from lucide-vue-next), and an href link.

desktopClass

string

""

Tailwind classes applied to the desktop container. Used primarily for absolute positioning.

mobileClass

string

""

Tailwind classes applied to the mobile expanding button container.

Settings

Alignment Position

Number of Items5

source-code.vue

<script setup lang="ts">
import { FloatingDock } from '@/components/ui/floating-dock'
import { , , , ,  } from 'lucide-vue-next'

const items = [
  { title: 'Home', icon: undefined, href: '#' },
  { title: 'Products', icon: undefined, href: '#' },
  { title: 'Components', icon: undefined, href: '#' },
  { title: 'Changelog', icon: undefined, href: '#' },
  { title: 'Raya UI', icon: undefined, href: '#' }
]
</script>

<template>
  <div class="relative h-[400px] w-full flex items-center justify-center">
    <FloatingDock
      :items="items"
      desktop-class="absolute bottom-10"
      mobile-class="absolute bottom-10 right-10"
    />
  </div>
</template>