BeUI Action Swap

Buttons 60

About

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

Code

How BeUI Action Swap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Check, Copy } from "lucide-react";
import {
  ActionSwapCascadeButton,
  type ActionSwapItem,
} from "@/components/ui/be-ui-action-swap";

const CTA_ITEMS: ActionSwapItem[] = [
  {
    id: "copy",
    label: "Copy link",
    icon: <Copy className="h-4 w-4" />,
    ariaLabel: "Copy link",
  },
  {
    id: "copied",
    label: "Copied!",
    icon: <Check className="h-4 w-4" />,
    ariaLabel: "Copied",
  },
];

export default function ActionSwapCascadePreview() {
  return (
    <div className="flex w-full justify-center">
      <ActionSwapCascadeButton items={CTA_ITEMS} variant="primary" />
    </div>
  );
}