Floating Action Menu

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/floating-action-menu.json

Usage

import {
  FloatingActionMenu,
  type FloatingActionItem
} from '@/components/matos-ui/floating-action-menu'
import { Pencil, Share2 } from 'lucide-react'

const items: FloatingActionItem[] = [
  { id: 'edit', label: 'Edit', icon: <Pencil className="size-5" /> },
  { id: 'share', label: 'Share', icon: <Share2 className="size-5" /> }
]

<FloatingActionMenu items={items} />

Reference

FloatingActionMenu Props

Prop	Type	Default	Description
`items`	`FloatingActionItem[]`	-	Actions revealed when the menu opens.
`stiffness`	`number`	`420`	Spring stiffness for the reveal and rotation.
`damping`	`number`	`20`	Spring damping for the reveal and rotation.

FloatingActionItem

Field	Type	Description
`id`	`string`	Unique key for the action.
`label`	`string`	Tooltip label and aria-label.
`icon`	`ReactNode`	Icon rendered in the button.
`onClick`	`() => void`	Click handler for the action.