Floating Action Button
Speed dial style floating action button with expandable quick actions.
Quick actions stay within reach as you work.
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/floating-action-button.tsx
Installation
Using shadcn CLI
npx shadcn add floating-action-button --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Buttons Components
Add to Cart Button
E-commerce button with loading spinner, success checkmark, and animated state transitions.
Aurora Button
An animated button with a flowing gradient effect that shifts between your primary and secondary colors. Perfect for calls-to-action.
Border Beam Button
A button with an animated beam that travels around the border for a premium call to action.
Button
A versatile button component with multiple variants including default, outline, fancy, ghost, and secondary styles.
Copy Button
Click to copy text with animated feedback and tooltip support.
Follow Button
Follow and following toggle with follower count label.