Border Beam

A glowing comet that continuously orbits the border of a container — instantly upgrades cards, code blocks, and feature sections.

UniqueUI CLI

npx uniqueui add border-beam

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/border-beam.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Animated border

A comet orbits continuously.

Custom colours

Any gradient, any speed.

Usage

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

export default function FeatureCard() {
  return (
    <BorderBeam
      colorFrom="#a855f7"
      colorTo="#ec4899"
      duration={5}
      className="rounded-xl p-6 bg-neutral-900"
    >
      <h3 className="text-xl font-bold text-white">Spotlight Feature</h3>
      <p className="text-neutral-400 mt-2">
        Drop BorderBeam around any card to make it shine.
      </p>
    </BorderBeam>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Content inside the bordered container.
`duration`	`number`	Seconds for one full orbit.
`colorFrom`	`string`	Comet head colour.
`colorTo`	`string`	Comet tail colour.
`size`	`number`	Diameter of the glowing orb in px.
`borderWidth`	`number`	Width of the container border in px.
`className`	`string`	Extra Tailwind classes on the container.
`theme`	`"light" \| "dark"`	Controls border colour.