Docs/Border Beam

Border Beam

A moving gradient beam that travels along the border of its container. Perfect for highlighting active states, new features, or premium content.

Installation

$pnpm dlx shadcn@latest add @componentry/border-beam

Usage

API Reference

PropTypeDefault
sizeLength of the beam in pixels.
number200
durationAnimation duration in seconds.
number15
borderWidthWidth of the border/beam in pixels.
number1.5
colorFromStart color of the gradient.
string"#ffaa40"
colorToEnd color of the gradient.
string"#9c40ff"
delayAnimation delay in seconds.
number0

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

Border Beam

The beam follows the border path

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

<div className="relative flex h-[300px] w-full items-center justify-center overflow-hidden rounded-xl border bg-background">
  <div className="z-10 text-center">
    <h3 className="text-2xl font-bold tracking-tight">Border Beam</h3>
    <p className="text-muted-foreground">The beam follows the border path</p>
  </div>
  <BorderBeam />
</div>