Components
Loading preview...
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.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/overflow-actions"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>
);
}