UI Showcase - LaraCoreKit

Copy to Clipboard

Click to copy text to clipboard with visual feedback

npm install laravel-corekit
php artisan migrate
npm run dev

git clone https://github.com/user/repo.git

Code

<div x-data="{ copied: false }">
    <div class="flex items-center gap-2">
        <input type="text" value="https://example.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>

QR Code Generator

Generate QR codes using external API

Enter URL or Text

Size: px

Download QR Code

Code

<div x-data="{ url: 'https://example.com', qrUrl: '' }" x-init="qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`">
    <input type="text" x-model="url" @input="qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(url)}`" placeholder="Enter URL" class="w-full px-3 py-2 border rounded-lg mb-4">
    <div class="flex justify-center">
        <img :src="qrUrl" alt="QR Code" class="border rounded-lg p-2 bg-white">
    </div>
</div>

Export to CSV

Export data to CSV file for download

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Active
Bob Johnson	bob@example.com	Editor	Pending

Code

<button @click="
    const data = [
        ['Name', 'Email', 'Role'],
        ['John Doe', 'john@example.com', 'Admin'],
        ['Jane Smith', 'jane@example.com', 'User']
    ];
    const csv = data.map(row => row.join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'export.csv';
    a.click();
" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
    Export to CSV
</button>

Back to Top Button

Scroll to top button that appears when scrolling down

Scroll down this page to see the "Back to Top" button appear in the bottom right corner.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Scroll down to see more content and trigger the back to top button...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Keep scrolling...

Almost there...

You made it to the bottom! Now click the back to top button.

Code

<div x-data="{ showButton: false }" @scroll.window="showButton = window.pageYOffset > 300">
    <button x-show="showButton" @click="window.scrollTo({ top: 0, behavior: 'smooth' })" class="fixed bottom-8 right-8 p-3 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition z-50">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
        </svg>
    </button>
</div>

Download Button

Trigger file downloads with different formats

Code

<button @click="
    const content = 'Sample file content';
    const blob = new Blob([content], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'sample.txt';
    a.click();
    URL.revokeObjectURL(url);
" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
    Download File
</button>