Border Beam
A glowing beam that moves around the border of a container.
Preview
Beam
Installation
bash
npx auralix-ui add border-beamUsage
Card with Border Beam
tsx
import { BorderBeam } from "@/components/ui/BorderBeam";
<div className="relative h-48 w-full overflow-hidden rounded-xl border bg-background">
<BorderBeam />
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
size | number | 200 | Length of the beam. |
duration | number | 15 | Duration of the animation in seconds. |
borderWidth | number | 1.5 | Width of the border. |
colorFrom | string | "#ffaa40" | Start color. |
colorTo | string | "#9c40ff" | End color. |
Variants
Standard
Standard
Thick & Slow
Thick
Colored
Colored
On this page