Border Beam

Login

Enter your credentials to access your account.

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { BorderBeam } from "@/registry/magicui/border-beam"

export function Component() {
  return (
    <Card className="relative w-[350px] overflow-hidden">
      <CardHeader>
        <CardTitle>Login</CardTitle>
        <CardDescription>
          Enter your credentials to access your account.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="Enter your email" />
            </div>
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="Enter your password"
              />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Register</Button>
        <Button>Login</Button>
      </CardFooter>
      <BorderBeam duration={8} size={100} />
    </Card>
  )
}

Open in

Now Playing

Stairway to Heaven - Led Zeppelin

2:458:02

import { Play, SkipBack, SkipForward } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { BorderBeam } from "@/registry/magicui/border-beam"

export function MusicPlayer() {
  return (
    <Card className="relative w-[350px] overflow-hidden">
      <CardHeader>
        <CardTitle>Now Playing</CardTitle>
        <CardDescription>Stairway to Heaven - Led Zeppelin</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col items-center gap-4">
          <div className="h-48 w-48 rounded-lg bg-gradient-to-br from-purple-500 to-pink-500" />
          <div className="bg-secondary h-1 w-full rounded-full">
            <div className="bg-primary h-full w-1/3 rounded-full" />
          </div>
          <div className="text-muted-foreground flex w-full justify-between text-sm">
            <span>2:45</span>
            <span>8:02</span>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex justify-center gap-4">
        <Button variant="outline" size="icon" className="rounded-full">
          <SkipBack className="size-4" />
        </Button>
        <Button size="icon" className="rounded-full">
          <Play className="size-4" />
        </Button>
        <Button variant="outline" size="icon" className="rounded-full">
          <SkipForward className="size-4" />
        </Button>
      </CardFooter>
      <BorderBeam
        duration={6}
        size={400}
        className="from-transparent via-red-500 to-transparent"
      />
      <BorderBeam
        duration={6}
        delay={3}
        size={400}
        borderWidth={2}
        className="from-transparent via-blue-500 to-transparent"
      />
    </Card>
  )
}

Open in

Login

Enter your credentials to access your account.

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { BorderBeam } from "@/registry/magicui/border-beam"

export function LoginForm() {
  return (
    <Card className="relative w-[350px] overflow-hidden">
      <CardHeader>
        <CardTitle>Login</CardTitle>
        <CardDescription>
          Enter your credentials to access your account.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <div className="grid w-full items-center gap-4">
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" placeholder="Enter your email" />
            </div>
            <div className="flex flex-col space-y-1.5">
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="Enter your password"
              />
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Register</Button>
        <Button>Login</Button>
      </CardFooter>
      <BorderBeam
        duration={4}
        size={300}
        reverse
        className="from-transparent via-green-500 to-transparent"
      />
    </Card>
  )
}

Open in

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

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

Prop	Type	Default	Description
`className`	`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`	`React.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

Prop	Type	Default	Description
`className`	`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`	`React.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

Border Beam

Installation

Examples

2 Border Beams

Reverse

Spring Animation

Usage

Props

Border Beam

Border Beam

Installation

Examples

2 Border Beams

Reverse

Spring Animation

Usage

Props

Border Beam