Floating Button

Buttons 33

About

Here is floating action button component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Floating Button to your project and fits it to your theme.

Code

How Floating Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import * as React from "react";
import CircularMenu from "@/components/ui/floating-button";

const CircularMenuDemo = () => {
  const images = [
    "https://cdn.21st.dev/assets/mirror/32/32ca3771d3e6dc40c332111e84c7480e9f1d28ba7a1b47aa8e35657c8e9f5588.jpg",
    "https://cdn.21st.dev/assets/mirror/3a/3a8b223234c712d0f8cfa0e7a28ff45061c76ec058cf1a2a711044c0d7135811.jpg",
    "https://cdn.21st.dev/assets/mirror/8e/8e95b239e53df4adb8e5ba8dfad83faca9f933240d306d85c617d0dd6e86e362.jpg",
    "https://cdn.21st.dev/assets/mirror/f8/f8ed4c78c13d825e25f34b4e109c3e19e43247d7fea07a1c48ec7c034d264182.jpg",
  ];

  return (
    <div className="relative flex min-h-[450px] w-full items-center justify-center bg-background p-10">
      <CircularMenu images={images} />
    </div>
  );
};

export { CircularMenuDemo as DemoOne };