Something new is coming.Join the waitlist

Border Beam

PreviousNext

Animated rotating border beam for React. Pure CSS conic-gradient + @property animation, no JavaScript, GPU-accelerated. Drop into any rounded container.

Default beam

A thin animated stroke that traces the container's border radius.

Two beams

Stack multiple beams with different colors and a phase offset.

Installation

npx shadcn@latest add https://tentui.com/r/border-beam.json

Usage

BorderBeam is an absolutely-positioned overlay. Render it inside a relative overflow-hidden container and the beam traces the container's border radius.

import { BorderBeam } from "@/components/border-beam";
 
export function HighlightCard() {
  return (
    <div className="relative overflow-hidden rounded-xl border p-6">
      <BorderBeam />
      <h3>Featured</h3>
    </div>
  );
}

The animation is a single CSS keyframe on a registered custom property (--beam-angle). Browsers interpolate the angle on the GPU, so the beam stays smooth even on dozens of stacked cards.

Patterns

Stacked beams

Render multiple <BorderBeam /> instances with different colors and delay values to get a multi-color rotation without re-running the animation.

<div className="relative overflow-hidden rounded-xl border p-6">
  <BorderBeam duration={6} delay={0} colorTo="hsl(217 91% 60%)" />
  <BorderBeam duration={6} delay={3} colorTo="hsl(330 81% 60%)" reverse />
  <h3>Pro</h3>
</div>

Match the parent radius

The beam reads the parent's border radius via borderRadius: "inherit". If you need a different curve, pass a number or CSS value:

<BorderBeam borderRadius={24} />
<BorderBeam borderRadius="9999px" />

Props

PropTypeDefaultDescription
sizenumber1.5Beam thickness in pixels.
durationnumber10One full rotation, in seconds.
delaynumber0Delay before the rotation starts.
colorFromstring"transparent"Color at the start of the conic gradient (the tail).
colorTostring"hsl(217 91% 60%)"Color at the end (the bright lead).
borderRadiusnumber | string"inherit"CSS radius for the beam path.
reversebooleanfalseReverse the rotation direction.
classNamestring—Forwarded to the overlay <div>.

Accessibility & motion

  • The beam is decorative — it carries aria-hidden="true" and is not exposed to assistive tech.
  • A prefers-reduced-motion: reduce media query halts the animation. The beam stays visible but stops rotating.

Browser support

@property is supported in all evergreen browsers (Chrome 85+, Safari 16.4+, Firefox 128+). On older browsers the beam renders as a static conic gradient — still readable, just not animated.