Border Beam
A glowing beam that travels around a container's border, used to highlight a card, a pricing plan, or the currently selected item.
A beam with a gradient tail circles the container's border continuously. It is driven by a rectangular CSS offset-path and clipped to the border ring with a mask, so the effect is lightweight and needs no canvas.
npx shadcn@latest add https://webberui.com/r/border-beam.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<BorderBeam />
Installation
npx shadcn@latest add https://webberui.com/r/border-beam.jsonOr, once registries are configured in components.json, install it as @webberui/border-beam.
Usage
BorderBeam is an absolutely positioned overlay layer. Put it inside a container that is relative, overflow-hidden, and rounded, and keep borderRadius in sync with the container's radius so the beam hugs the corners.
import { BorderBeam } from "@/components/ui/border-beam";
<div className="relative overflow-hidden rounded-xl border p-6">
{/* your content */}
<BorderBeam size={70} duration={6} borderRadius={12} />
</div>For two beams in opposing colors, stack two BorderBeams and give one of them a delay and a different color.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 60 | Beam length (px); larger values give a longer tail |
duration | number | 6 | Duration of one full lap (seconds) |
delay | number | 0 | Delay before it starts (seconds) |
colorFrom | string | "#22d3ee" | Color at the head of the beam |
colorTo | string | "#818cf8" | Color at the tail of the beam (fading to transparent afterward) |
borderWidth | number | 1.5 | Width of the border (beam ring) (px) |
borderRadius | number | 12 | Corner radius (px); must match the container's rounded |
reverse | boolean | false | Travel in reverse (counter-clockwise) |
initialOffset | number | 0 | Starting position offset (0–100, as a percentage) |
transition | Transition | — | Override the default motion transition |
Accessibility
- When the user has "reduce motion" enabled at the system level, the beam stays still instead of traveling
- The overlay layer carries
aria-hidden— decorative only, so it does not interfere with assistive technology