Border Beam

An animated beam of light which travels along the border of its container.

Login

Enter your credentials to access your account.

import { Button } from '@/components/ui/button'
import { BorderBeam } from '@/registry/magicui/border-beam'

const inputClass = 'h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none'

export function BorderBeamDemo() {
  return (
    <div class="
      relative w-87.5 overflow-hidden rounded-xl border bg-card
      text-card-foreground shadow-sm
    "
    >
      <div class="space-y-1.5 p-6 pb-4">
        <h3 class="text-lg font-semibold tracking-tight">Login</h3>
        <p class="text-sm text-muted-foreground">
          Enter your credentials to access your account.
        </p>
      </div>
      <form>
        <div class="grid w-full items-center gap-4 p-6 pt-0">
          <div class="flex flex-col space-y-1.5">
            <label class="text-sm leading-none font-medium" for="email">Email</label>
            <input id="email" type="email" placeholder="Enter your email" class={inputClass} />
          </div>
          <div class="flex flex-col space-y-1.5">
            <label class="text-sm leading-none font-medium" for="password">Password</label>
            <input id="password" type="password" placeholder="Enter your password" class={inputClass} />
          </div>
        </div>
      </form>
      <div class="flex justify-between p-6 pt-0">
        <Button variant="outline">Register</Button>
        <Button>Login</Button>
      </div>
      <BorderBeam duration={8} size={100} />
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add @magicui-solid/border-beam

bunx shadcn@latest add @magicui-solid/border-beam

yarn dlx shadcn@latest add @magicui-solid/border-beam

npx shadcn@latest add @magicui-solid/border-beam

Examples

2 Border Beams

Now Playing

Stairway to Heaven - Led Zeppelin

2:458:02

import { Play, SkipBack, SkipForward } from 'lucide-solid'
import { Button } from '@/components/ui/button'
import { BorderBeam } from '@/registry/magicui/border-beam'

export function BorderBeamDemo2() {
  return (
    <div class="
      relative w-87.5 overflow-hidden rounded-xl border bg-card
      text-card-foreground shadow-sm
    "
    >
      <div class="space-y-1.5 p-6 pb-4">
        <h3 class="text-lg font-semibold tracking-tight">Now Playing</h3>
        <p class="text-sm text-muted-foreground">
          Stairway to Heaven - Led Zeppelin
        </p>
      </div>
      <div class="flex flex-col items-center gap-4 p-6">
        <div class="
          size-48 rounded-lg bg-linear-to-br from-purple-500 to-pink-500
        "
        />
        <div class="h-1 w-full rounded-full bg-secondary">
          <div class="h-full w-1/3 rounded-full bg-primary" />
        </div>
        <div class="flex w-full justify-between text-sm text-muted-foreground">
          <span>2:45</span>
          <span>8:02</span>
        </div>
      </div>
      <div class="flex justify-center gap-4 p-6 pt-0">
        <Button variant="outline" size="icon" class="rounded-full">
          <SkipBack class="size-4" />
        </Button>
        <Button size="icon" class="rounded-full">
          <Play class="size-4" />
        </Button>
        <Button variant="outline" size="icon" class="rounded-full">
          <SkipForward class="size-4" />
        </Button>
      </div>
      <BorderBeam
        duration={6}
        size={400}
        class="from-transparent via-red-500 to-transparent"
      />
      <BorderBeam
        duration={6}
        delay={3}
        size={400}
        borderWidth={2}
        class="from-transparent via-blue-500 to-transparent"
      />
    </div>
  )
}

Reverse

Login

Enter your credentials to access your account.

import { Button } from '@/components/ui/button'
import { BorderBeam } from '@/registry/magicui/border-beam'

const inputClass = 'h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none'

export function BorderBeamDemo3() {
  return (
    <div class="
      relative w-87.5 overflow-hidden rounded-xl border bg-card
      text-card-foreground shadow-sm
    "
    >
      <div class="space-y-1.5 p-6 pb-4">
        <h3 class="text-lg font-semibold tracking-tight">Login</h3>
        <p class="text-sm text-muted-foreground">
          Enter your credentials to access your account.
        </p>
      </div>
      <form>
        <div class="grid w-full items-center gap-4 p-6 pt-0">
          <div class="flex flex-col space-y-1.5">
            <label class="text-sm leading-none font-medium" for="email">Email</label>
            <input id="email" type="email" placeholder="Enter your email" class={inputClass} />
          </div>
          <div class="flex flex-col space-y-1.5">
            <label class="text-sm leading-none font-medium" for="password">Password</label>
            <input id="password" type="password" placeholder="Enter your password" class={inputClass} />
          </div>
        </div>
      </form>
      <div class="flex justify-between p-6 pt-0">
        <Button variant="outline">Register</Button>
        <Button>Login</Button>
      </div>
      <BorderBeam
        duration={4}
        size={300}
        reverse
        class="from-transparent via-green-500 to-transparent"
      />
    </div>
  )
}

Spring Animation

import { Button } from '@/components/ui/button'
import { BorderBeam } from '@/registry/magicui/border-beam'

export function BorderBeamDemo4() {
  return (
    <Button class="relative overflow-hidden" size="lg" variant="outline">
      Buy Now
      <BorderBeam
        size={40}
        initialOffset={20}
        class="from-transparent via-yellow-500 to-transparent"
        transition={{
          type: 'spring',
          stiffness: 60,
          damping: 20,
        }}
      />
    </Button>
  )
}

Import

import { BorderBeam } from '@/components/magicui/border-beam'

Usage

<div class="relative h-[500px] w-full overflow-hidden">
  <BorderBeam />
</div>

Props

BorderBeam

Prop	Type	Default	Description
`class`	`string`	`-`	Custom class to apply to the component
`size`	`number`	`50`	Size of the beam
`duration`	`number`	`6`	Duration of the animation 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
`transition`	`Transition`	`-`	Custom motion transition configuration
`style`	`CSSProperties`	`-`	Custom CSS styles to apply
`reverse`	`boolean`	`false`	Whether to reverse animation direction
`initialOffset`	`number`	`0`	Initial offset position (0-100)
`borderWidth`	`number`	`1`	Border width of the beam

Original:

magicui.design/docs/components/border-beam