Copy to Clipboard Component - LaraCoreKit

Copy to clipboard component using Alpine.js. One-click copy with visual feedback for Laravel apps.

Copy to Clipboard

One-click copy with visual feedback

Preview

npm install laravel-corekit
php artisan migrate
npm run dev
View Code
<div x-data="{ copied: false }">
    <div class="flex items-center gap-2">
        <input type="text" value="https://www.laracorekit.com/share/abc123" readonly class="flex-1 px-3 py-2 border rounded-lg">
        <button @click="
            navigator.clipboard.writeText($el.previousElementSibling.value);
            copied = true;
            setTimeout(() => copied = false, 2000);
        " class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            <span x-show="!copied">Copy</span>
            <span x-show="copied" x-cloak>Copied!</span>
        </button>
    </div>
</div>