Disclosable FAB
Beautifully designed floating action button component with Tailwind CSS and Framer Motion. Copy, paste, and customize to enhance your web projects effortlessly.
FAB Button Tailwind CSS Framer Motion
Installation
Run the following command:
npx gopx-webui add disclosable-fabProps
| Prop | Type | Required | Description |
|---|---|---|---|
menuItems | MenuItemProps[] | Yes | Array of menu items to be displayed when FAB is opened |
width | number | No | Width of the expanded FAB menu in pixels. Defaults to 320 |
height | number | No | Height of the expanded FAB menu in pixels. Defaults to 280 |
backgroundColor | string | No | Background color class for light mode. Defaults to "bg-white" |
darkBackgroundColor | string | No | Background color class for dark mode. Defaults to "dark:bg-[#1f1f1f]" |
MenuItemProps
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Title text for the menu item |
description | string | Yes | Description text for the menu item |
icon | LucideIcon | Yes | Lucide icon component to be displayed for the menu item |
onClick | () => void | No | Optional click handler for the menu item |