soultelui
← Components

Border Beam

component

A beam of light that travels around a card border. Great for AI and SaaS surfaces.

Pro planEverything in one place

Installation

Namespace
npx shadcn@latest add @soultel/border-beam
URL
npx shadcn@latest add https://asafefe.dev/r/border-beam.json

Usage

usage.tsx
import { BorderBeam } from "@/components/border-beam"

export function Example() {
  return (
    <BorderBeam className="w-64">
      <div className="p-6">Your content</div>
    </BorderBeam>
  )
}

Notes

The beam is a rotating conic gradient sitting one pixel behind the content, so only the ring shows. It pairs well with pricing cards, AI feature callouts, and anything you want to draw the eye toward.

Props

PropTypeDefault
durationnumber5
colorFromstringvar(--primary)
colorTostring#3b82f6
borderRadiusnumber14
Slow it down with a larger duration, or match your brand by passing colorFrom and colorTo. The inner surface uses bg-card, so it settles into any dark or light theme.