Border beamPro

• Drawing the eye to one card: the recommended plan, a new feature.

• More than one element per view.

Import it from @/components/ui/border-beam after installing.

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

export function Highlight() {
  return <BorderBeam className="rounded-xl p-6">Pro</BorderBeam>;
}

• Decorative and aria-hidden; static under reduced motion.

• A conic gradient rotates around the border.

• Follows the element's radius.

• Pure CSS with an animated custom property.

• Give it a border radius class.