Border Beam

An animated beam of light that travels along the border of any Card. Inspired by Magic UI’s Border Beam . Implemented with pure CSS — no external animation library required.

Installation

npx shadcn@latest add https://prismaui.com/components/border-beam.json

Import


import { BorderBeam } from '@/components/ui/border-beam';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card';

Preview

Border Beam

An animated beam travels along the border.

Drop <BorderBeam /> inside any Card with relative overflow-hidden.


<Card className='relative w-85 overflow-hidden'>
  <BorderBeam />
  <CardHeader>
    <CardTitle>Border Beam</CardTitle>
    <CardDescription>
      An animated beam travels along the border.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p className='text-sm text-muted-foreground'>
      Drop &lt;BorderBeam /&gt; inside any Card with relative overflow-hidden.
    </p>
  </CardContent>
  <CardFooter>
    <Button size='sm'>Action</Button>
  </CardFooter>
</Card>

Custom Colors

Blue gradient, faster speed.

Customize the beam colors and speed with props.

Reversed Beam

Gold colors, reversed direction.

Use the reverse prop to flip the beam direction.


<Card className="relative overflow-hidden">
  <BorderBeam colorFrom="#00c6ff" colorTo="#0072ff" duration={4} />
  ...
</Card>
 
<Card className="relative overflow-hidden">
  <BorderBeam colorFrom="#f7971e" colorTo="#ffd200" reverse />
  ...
</Card>

Double Beam

Stack two <BorderBeam /> instances with opposite directions and a delay offset for a more dynamic effect.

Double Beam

Two beams, opposite directions.

Stacking two beams with a half-period delay creates a symmetric loop.


<Card className='relative overflow-hidden'>
  <BorderBeam duration={6} />
  <BorderBeam duration={6} delay={3} reverse />
  ...
</Card>

Props

Prop	Type	Default	Description
`size`	`number`	`50`	Size of the beam in pixels
`duration`	`number`	`6`	Duration of one full loop in seconds
`delay`	`number`	`0`	Delay before the animation starts
`colorFrom`	`string`	`#ffaa40`	Start color of the beam gradient
`colorTo`	`string`	`#9c40ff`	End color of the beam gradient
`reverse`	`boolean`	`false`	Whether to reverse the animation direction