Components
Border Beam
A container with a light beam continuously travelling around its border.
php artisan blatui:add border-beam
Border Beam
A light beam glides endlessly around this card’s border to draw the eye.
<x-ui.border-beam class="max-w-sm">
<h3 class="text-base font-semibold">Border Beam</h3>
<p class="text-muted-foreground mt-2 text-sm">
A light beam glides endlessly around this card’s border to draw the eye.
</p>
</x-ui.border-beam>Colored
Custom color
Pass any CSS color to color to retint the beam.
<x-ui.border-beam color="#22c55e" class="max-w-sm">
<h3 class="text-base font-semibold">Custom color</h3>
<p class="text-muted-foreground mt-2 text-sm">
Pass any CSS color to <code class="font-mono text-xs">color</code> to retint the beam.
</p>
</x-ui.border-beam>Fast
Faster beam
A shorter duration spins the beam quicker; bump
size for a bolder ring.
<x-ui.border-beam :duration="3" :size="3" class="max-w-sm">
<h3 class="text-base font-semibold">Faster beam</h3>
<p class="text-muted-foreground mt-2 text-sm">
A shorter <code class="font-mono text-xs">duration</code> spins the beam quicker; bump
<code class="font-mono text-xs">size</code> for a bolder ring.
</p>
</x-ui.border-beam>