Mercury Dial

Buttons 4

About

A floating action button that bursts open into a fan of gooey liquid-metal action buttons, with each drop draggable via a stretchy metaball effect.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";
import {
  MercuryDial,
  type MercuryDialItem,
} from "@/components/ui/mercury-dial";
import { Image, Square, Type } from "lucide-react";

const glyph = "size-3.5";

const ITEMS: MercuryDialItem[] = [
  { label: "Image", icon: <Image className={glyph} aria-hidden="true" /> },
  { label: "Text", icon: <Type className={glyph} aria-hidden="true" /> },
  { label: "Shape", icon: <Square className={glyph} aria-hidden="true" /> },
];

export default function MercuryDialDemo() {
  const [picked, setPicked] = React.useState<string | null>(null);

  return (
    <div className="bg-background text-foreground flex h-full min-h-[24rem] w-full flex-col items-center justify-end gap-6 pb-16">
      <MercuryDial
        items={ITEMS.map((item) => ({
          ...item,
          onSelect: () => setPicked(item.label),
        }))}
        size={96}
        label="Insert"
      />
      <p className="text-muted-foreground h-5 text-sm">
        {picked ? `Inserted ${picked.toLowerCase()}` : null}
      </p>
    </div>
  );
}