Overflow Actions

Buttons 3

About

Connected pill rail for primary actions that springs open to reveal extra controls. Built with Motion layout animations, controllable expanded state, and hover-capable detection for touch devices.

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

Code

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

Usage.tsx

"use client";

import { CalendarClock, Eye, GitBranch, Pin } from "lucide-react";
import { useState } from "react";
import {
  OverflowActions,
  type OverflowActionItem,
} from "@/components/ui/overflow-actions";

const primaryActions: OverflowActionItem[] = [
  { id: "preview", label: "Preview", icon: <Eye className="h-4 w-4" /> },
  { id: "pin", label: "Pin", icon: <Pin className="h-4 w-4" /> },
];

const overflowActions: OverflowActionItem[] = [
  { id: "branch", label: "Branch", icon: <GitBranch className="h-4 w-4" /> },
  {
    id: "schedule",
    label: "Schedule",
    icon: <CalendarClock className="h-4 w-4" />,
  },
];

export default function Default() {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <OverflowActions
        primaryActions={primaryActions}
        overflowActions={overflowActions}
        expanded={expanded}
        onExpandedChange={setExpanded}
      />
    </div>
  );
}