Gooey Actions

Buttons 19

About

A floating action button whose children separate out of the trigger like liquid metal, using an SVG goo filter.

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

Code

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

Usage.tsx

"use client";

import { GooeyActions } from "@/components/ui/gooey-actions";

const Icon = ({ d }: { d: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.8}
    strokeLinecap="round"
    strokeLinejoin="round"
    className="h-5 w-5"
  >
    <path d={d} />
  </svg>
);

// Hoisted so the fan is not rebuilt on every render.
const ACTIONS = [
  { id: "note", label: "New note", icon: <Icon d="M12 5v14M5 12h14" /> },
  { id: "share", label: "Share", icon: <Icon d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7M12 3v13M8 7l4-4 4 4" /> },
  { id: "star", label: "Favourite", icon: <Icon d="m12 3 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3-5.8 3 1.1-6.5L2.6 9.8l6.5-.9L12 3Z" /> },
  { id: "trash", label: "Delete", icon: <Icon d="M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13" /> },
];

export default function GooeyActionsDemo() {
  return (
    <div className="flex min-h-[460px] w-full items-end justify-center p-12">
      <GooeyActions
        label="Compose"
        actions={ACTIONS}
        radius={128}
        arc={[-150, -30]}
        defaultOpen
      />
    </div>
  );
}