Border beam

An animated rainbow glow that rides the border of any card, button or input.

Preview Install Usage

Tune in Studio Copy prompt

Add the Beam effect from Libraries.dev to my React app.

Install:
npm install border-beam

Usage:
import { BorderBeam } from 'border-beam';

<BorderBeam size="md" colorVariant="colorful" strength={0.7}>
  <YourCard>Content</YourCard>
</BorderBeam>

Props:
- size: "md" | "sm" | "line" | "pulse-inner" | "pulse-outside"
- colorVariant: "colorful" | "mono" | "ocean" | "sunset"
- strength: 0-1, glow intensity
- active: boolean, pauses the animation when false
- theme: "light" | "dark"

Beam wraps a child element and rides an animated glow around its border.
It ships zero runtime dependencies and needs React 18 or newer.
Docs: https://libraries.dev/beam.html