Skip to main content
ParticleUI

Border Beam

Rotating conic-gradient border that sweeps around any container. Configurable colors, speed, and border width.

Border Beam

Fast & Warm

Installation

1

Run the CLI

$npx particleui-cli add border-beam

Usage

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

export default function Example() {
  return (
    <BorderBeam className="w-64 p-6 bg-surface-1">
      <h3 className="font-semibold">Border Beam</h3>
      <p className="text-sm text-muted-foreground mt-1">Rotating gradient border.</p>
    </BorderBeam>
  )
}

Props

PropTypeDefaultRequired
durationnumber4no
colorFromstring"oklch(78% 0.17 200)"no
colorTostring"oklch(78% 0.17 280)"no
borderWidthnumber1.5no

Details

Source filecomponents/ui/border-beam.tsx
Typeui
Categoriescards, particles
npm dependencies
Registry deps
Claude skill