Overflow actions

Free

A few primary actions with the rest tucked behind an expander.

Installs components/ui/overflow-actions.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/overflow-actions.json

When to use #

Use it for

Toolbars that must fit narrow widths.
The first two actions are used far more than the others.

Skip it when

All actions are equally important; show them all.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/overflow-actions.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Archive, Copy, Pencil, Share2 } from "lucide-react"
import { OverflowActions } from "@/components/ui/overflow-actions"

export function DocumentActions() {
  return (
    <OverflowActions
      primaryActions={[
        { id: "edit", label: "Edit", icon: <Pencil aria-hidden="true" /> },
        { id: "share", label: "Share", icon: <Share2 aria-hidden="true" /> },
      ]}
      overflowActions={[
        { id: "copy", label: "Duplicate", icon: <Copy aria-hidden="true" /> },
        { id: "archive", label: "Archive", icon: <Archive aria-hidden="true" /> },
      ]}
    />
  );
}

API reference #