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
| Prop | Type | Default | Required |
|---|---|---|---|
| duration | number | 4 | no |
| colorFrom | string | "oklch(78% 0.17 200)" | no |
| colorTo | string | "oklch(78% 0.17 280)" | no |
| borderWidth | number | 1.5 | no |
Details
Source filecomponents/ui/border-beam.tsx
Typeui
Categoriescards, particles
npm dependencies
Registry deps
Claude skill—