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>