Components
Loading preview...
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
npx shadcn@latest add https://21st.dev/r/shadcn/context-menuimport {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
} from "@/components/ui/context-menu";
import {
Copy,
Mail,
Share2,
Zap,
XCircle,
} from "lucide-react";
function WithIcons() {
return (
<ContextMenu>
<ContextMenuTrigger className="grid h-[150px] w-[300px] place-items-center rounded border-2 border-dashed p-4 text-center text-sm">
Right click here to manage folder sharing
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuItem>
<Share2 className="mr-2 size-4" />
Share folder with others
</ContextMenuItem>
<ContextMenuItem>
<XCircle className="mr-2 size-4" />
Unshare folder
</ContextMenuItem>
<ContextMenuItem>
<Zap className="mr-2 size-4" />
Change sharing permissions
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<Copy className="mr-2 size-4" />
Copy share link
</ContextMenuItem>
<ContextMenuItem>
<Mail className="mr-2 size-4" />
Email share link
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
);
}
export { WithIcons }