Border Beam

A moving gradient beam that travels along the border of its container. Perfect for highlighting active states, new features, or premium content.

Install

pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/border-beam.json"

Examples

Default

Border Beam

The beam follows the border path

import { BorderBeam } from "@/components/ui/border-beam"

<div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden rounded-xl border bg-background">
  <div className="z-10 text-center">
    <h3 className="text-2xl font-bold tracking-tight">Border Beam</h3>
    <p className="text-muted-foreground">The beam follows the border path</p>
  </div>
  <BorderBeam />
</div>

Custom Colors

Customized

Slower, larger, custom colors

import { BorderBeam } from "@/components/ui/border-beam"

<div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden rounded-xl border bg-background">
  <div className="z-10 text-center">
    <h3 className="text-2xl font-bold tracking-tight">Customized</h3>
    <p className="text-muted-foreground">Slower, larger, custom colors</p>
  </div>
  <BorderBeam 
    size={500}
    duration={20}
    borderWidth={2}
    colorFrom="#10b981"
    colorTo="#3b82f6"
  />
</div>

Fast Animation

Fast Beam

Quick animation with warm colors

import { BorderBeam } from "@/components/ui/border-beam"

<div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden rounded-xl border bg-background">
  <div className="z-10 text-center">
    <h3 className="text-2xl font-bold tracking-tight">Fast Beam</h3>
    <p className="text-muted-foreground">Quick animation with warm colors</p>
  </div>
  <BorderBeam 
    size={150}
    duration={5}
    colorFrom="#f97316"
    colorTo="#eab308"
  />
</div>

Delayed Start

Beam starts after a 3 second delay

import { BorderBeam } from "@/components/ui/border-beam"

<div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden rounded-xl border bg-background">
  <div className="z-10 text-center">
    <h3 className="text-2xl font-bold tracking-tight">Delayed Start</h3>
    <p className="text-muted-foreground">Beam starts after a 3 second delay</p>
  </div>
  <BorderBeam 
    size={250}
    duration={12}
    delay={3}
    colorFrom="#ec4899"
    colorTo="#8b5cf6"
  />
</div>

Props

size

Length of the beam in pixels (default: 200)

duration

Animation duration in seconds (default: 15)

borderWidth

Width of the border/beam in pixels (default: 1.5)

colorFrom

Start color of the gradient (default: #ffaa40)

colorTo

End color of the gradient (default: #9c40ff)

delay

Animation delay in seconds (default: 0)