Border Beam
A beam of dithered light that travels around a card's border.
import { BorderBeam } from "@/components/border-beam";
export function ProPlan() {
return (
<BorderBeam className="w-72 rounded-2xl border p-6">
<h3 className="font-medium">Pro</h3>
<p className="text-sm opacity-70">Every component and preset.</p>
</BorderBeam>
);
}
Installation
pnpm dlx shadcn@latest add @gradients-pro/border-beamNeeds a Pro account and the Pro registry setup.
Usage
import { BorderBeam } from "@/components/border-beam";
<BorderBeam className="rounded-2xl border p-6">{children}</BorderBeam>;The beam follows the element's border radius, so give it rounded-* classes.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
palette | "ultramarine" | "ember" | "mono" | string[] | "ultramarine" | A curated ramp, or your own 2 to 6 CSS colours from faint to hot (var(--x) included). Curated ramps switch between a light and a dark version with your theme. |
duration | number | 7 | Seconds for one lap of the border. |
length | number | 0.34 | Length of the tail as a share of the perimeter, 0.05 to 0.45. |
beams | 1 | 2 | 1 | One beam, or two on opposite sides. |
trigger | "always" | "hover" | "always" | "hover" runs the beam only while hovered or focused within. |
cell | number | 2 | Size of one dither cell in CSS pixels. |
scheme | "light" | "dark" | follows the page | Forces a colour scheme. By default it reads a dark or light class (or data-theme) on <html>, then the system setting. |
className, other div props | The beam follows this element's border radius, so give it rounded-* classes as usual. |