Action bardata-display

Toolbar that moves overflowing actions into a More menu as its width shrinks, with an optional visible-count cap and keyboard hints in menu items.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/action-bar

의존 아이템button dropdown-menu locale style

Default

action-bar-demo.tsx

import { CopyIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react";import { ActionBar } from "@/components/ui/action-bar";
const actions = [  { key: "edit", label: "Edit", icon: PencilIcon, shortcut: "E" },  { key: "copy", label: "Copy", icon: CopyIcon, shortcut: "Ctrl+C" },  { key: "share", label: "Share", icon: ShareIcon },  { key: "delete", label: "Delete", icon: TrashIcon, variant: "destructive" as const },];
export default function ActionBarDemo() {  return (    <div className="w-64 max-w-full resize-x overflow-auto rounded-md border p-2">      <ActionBar actions={actions} />    </div>  );}