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&rsquo;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>

API Reference

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

Props

Prop	Type	Default	Description
`duration`	`number`	`6`	Seconds for one full revolution of the beam around the border. Lower values make the beam travel faster.
`color`	`string`	—	The beam highlight color (any CSS color or custom property). Defaults to the primary theme token.
`size`	`int`	`2`	Thickness of the border and beam ring, in pixels.

Slots

Slot	Description
`default`	The card content, rendered on the card background above the animated ring so the beam peeks out around it.