Border Beam

A popular SaaS design element. It wraps any container and mathematically rotates a glowing conic-gradient beam perfectly along its edge borders without bleeding into the background.

Live Preview

✨

Animated Borders

Endlessly rotating beams around any container.

Installation

CLI

npx @modus-ui/cli add border-beam

Manual

Copy the code from the component tab.
Create a file at components/ui/border-beam.tsx.
Paste the code.

Usage

tsx

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

export default function Example() {
  return (
    <div className="relative rounded-xl border bg-card p-6">
      <h3>Card Content</h3>
      <BorderBeam size={100} duration={6} />
    </div>
  );
}

Props

Prop	Type	Default	Description
`duration`	`number`	`8`	Seconds for one full trip around the border.
`borderWidth`	`number`	`1.5`	Thickness of the beam in pixels.
`size`	`number`	`200`	Length of the beam in pixels.
`colorFrom`	`string`	`"hsl(var(--primary))"`	Start colour of the beam gradient.
`colorTo`	`string`	`"transparent"`	End colour of the beam gradient.
`delay`	`number`	`0`	Seconds before the animation starts.