Docs
Border Beam
Border Beam
Displays an animated border effect with a glowing beam around the content that adapts to the size of the container.
Border Beam
This card showcases a dynamic border beam effect, adding a subtle, animated glow around the edges.
Installation
pnpm dlx shadcn@latest add to-setup
Usage
import { BorderBeam } from "@/components/ui/border-beam";<div className="relative rounded-lg shadow-sm">
<BorderBeam lightColor="#FAFAFA" lightWidth={350} duration={8} />
<div className="h-full w-full py-4 px-6 max-w-72 space-y-2">
<h3 className="font-gilroy text-2xl">Border Beam</h3>
<p className="text-sm">
This card showcases a dynamic border beam effect, adding a subtle,
animated glow around the edges.
</p>
</div>
</div>Note
The parent container must be set toposition: relativefor the BorderBeam effect to work properly.
Props
border-beam props.
| Prop | Type | Description | Default |
|---|---|---|---|
| lightWidth | number | Width of the light beam effect in pixels. | 200 |
| duration | number | Duration of the animation in seconds. | 10 |
| lightColor | string | Color of the light beam effect. | "#FAFAFA" |
| borderWidth | number | Width of the border in pixels. | 1 |
| className | string | Additional custom classes. | - |
| props | Record<string, any> | Additional HTML attributes for the component's wrapper div. | - |
Credits
This component is inspired by Resend