Kinetic UI | The Creative Motion Component Library

The GooeyMenu uses SVG filters (feGaussianBlur and feColorMatrix) combined with Framer Motion spring physics to create an organic, fluid extraction effect. When toggled, child items "pop" out of the main button. It features a highly customizable layout engine capable of positioning items in radials, arcs, rows, columns, or grids.

Live Preview

Gooey Menu

Camera

Alerts

Click the button to expand

Radial:Classic circular burst — items spread evenly around the toggle in a full 360° ring.

SVG Filter

Installation

npx kinetic-ui-cli@latest add gooey-menu

Props

GooeyMenu

GooeyMenuItem

Prop	Type	Default	Description
`children`	`ReactNode`	`Required`	The content (usually an icon) of the sub-item.
`label`	`string`	`—`	Optional tiny text label shown below the item.
`color`	`string`	`—`	Overrides the color for this specific item (great for multi-colored menus).
`onClick`	`() => void`	`—`	Action triggered when clicking this specific item.

Usage Examples

Classic Radial

Spreads items evenly in a 360° circle.

import { GooeyMenu, GooeyMenuItem } from "@/components/creative/gooey-menu";
import { Plus, Home, Settings, User, Mail } from "lucide-react";

export function RadialMenu() {
  return (
    <GooeyMenu layout="radial" radius={80} color="#818cf8" icon={<Plus />}>
      <GooeyMenuItem label="Home"><Home /></GooeyMenuItem>
      <GooeyMenuItem label="Profile"><User /></GooeyMenuItem>
      <GooeyMenuItem label="Settings"><Settings /></GooeyMenuItem>
      <GooeyMenuItem label="Messages"><Mail /></GooeyMenuItem>
    </GooeyMenu>
  );
}

Bottom Corner Arc

Fans items out in an arc (perfect for fixed bottom-right corners).

export function ArcMenu() {
  return (
    <GooeyMenu 
      layout="arc" 
      radius={100} 
      startAngle={180} // Start pointing left
      spreadAngle={90} // Spread 90 degrees up to top
      color="#22d3ee" 
      icon={<Plus />}
    >
      {/* ... items ... */}
    </GooeyMenu>
  );
}

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GooeyMenu } from "@/components/creative/gooey-menu";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GooeyMenu } from "@/components/creative/gooey-menu";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GooeyMenu
        icon{/* value */}
        layout{/* value */}
        radius{10}
      >
        <div>Content goes here</div>
      </GooeyMenu>
    </div>
  );
}

Frequently Used With