blatui

Components

Code Block

A dark code panel with an optional filename header and a copy button.

php artisan blatui:add code-block 
npm install blatui
php artisan blatui:add button card dialog
{{-- Headerless code block; the copy button appears on hover. --}}
<x-ui.code-block class="w-full max-w-md">@verbatim
npm install blatui
php artisan blatui:add button card dialog
@endverbatim</x-ui.code-block>

Tabs

<x-ui.card variant="sectioned">
    <x-ui.card-header>
        <x-ui.card-title>Welcome</x-ui.card-title>
    </x-ui.card-header>
</x-ui.card>
@import 'tailwindcss';
@source '../views';
{{-- Multiple files in one block, switched with tabs. --}}
<x-ui.tabs value="blade" class="w-full max-w-lg gap-0">
    <x-ui.tabs-list class="rounded-b-none">
        <x-ui.tabs-trigger value="blade">page.blade.php</x-ui.tabs-trigger>
        <x-ui.tabs-trigger value="css">app.css</x-ui.tabs-trigger>
    </x-ui.tabs-list>
    <x-ui.tabs-content value="blade" class="mt-0">
        <x-ui.code-block class="rounded-t-none">@verbatim
<x-ui.card variant="sectioned">
    <x-ui.card-header>
        <x-ui.card-title>Welcome</x-ui.card-title>
    </x-ui.card-header>
</x-ui.card>
@endverbatim</x-ui.code-block>
    </x-ui.tabs-content>
    <x-ui.tabs-content value="css" class="mt-0">
        <x-ui.code-block class="rounded-t-none">@verbatim
@import 'tailwindcss';
@source '../views';
@endverbatim</x-ui.code-block>
    </x-ui.tabs-content>
</x-ui.tabs>

With Filename

welcome.blade.php 
<x-ui.button>Get started</x-ui.button>
<x-ui.button variant="outline">
    <x-lucide-github /> Star on GitHub
</x-ui.button>
{{-- Code block with a filename header and an always-visible copy button. --}}
<x-ui.code-block filename="welcome.blade.php" class="w-full max-w-lg">@verbatim
<x-ui.button>Get started</x-ui.button>
<x-ui.button variant="outline">
    <x-lucide-github /> Star on GitHub
</x-ui.button>
@endverbatim</x-ui.code-block>

API Reference

Props, slots and exposed methods for <x-ui.code-block>.

Props

Prop Type Default Description
filename string — Optional file name shown in a header bar above the code, alongside a file icon and the copy button. When omitted, the copy button floats in the top corner and appears on hover instead.

Slots

Slot Description
default The code to display. Wrap it in @verbatim ... @endverbatim if it contains Blade or component syntax so it renders literally. The slot is trimmed and the copy button copies its rendered text.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
copy() Copies the code pane text to the clipboard and flips the icon to a check for ~1.6s. Wired to the built-in copy button; rarely called directly.