Components

Terminal

A terminal / console window with traffic-light controls — for command output and code demos.

php artisan blatui:add terminal

~/app — zsh

~/app $ php artisan blatui:add button card dialog

✓ Published button.blade.php

✓ Published card.blade.php

✓ Published dialog.blade.php

✓ 3 components — you own the code.

~/app $

<x-ui.terminal title="~/app — zsh" class="w-full max-w-md">
    <div><span class="prompt">~/app $</span> php artisan blatui:add button card dialog</div>
    <div><span class="ok">✓</span> <span class="dim">Published button.blade.php</span></div>
    <div><span class="ok">✓</span> <span class="dim">Published card.blade.php</span></div>
    <div><span class="ok">✓</span> <span class="dim">Published dialog.blade.php</span></div>
    <div><span class="ok">✓</span> 3 components — <span class="path">you own the code.</span></div>
    <div class="pt-1"><span class="prompt">~/app $</span> <span class="ml-1 inline-block h-[1.05em] w-[0.55ch] translate-y-0.5 animate-pulse bg-emerald-400 align-text-bottom"></span></div>
</x-ui.terminal>

API Reference

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

Props

Prop	Type	Default	Description
`title`	`string`	—	Optional label shown in the title bar, e.g. "~/app — zsh".
`buttons`	`bool`	`true`	Show the red/amber/green traffic-light dots in the title bar.

Slots

Slot	Description
`default`	The terminal body — your prompt and output lines. Helper classes are available on descendants: .prompt and .ok (emerald), .dim (muted), .path (cyan), .warn (amber). The window is dark in both light and dark themes.