Border Beam — Animated Border Beam Effect

A glowing light travels around the border of any element you wrap. Available for React, SwiftUI, and React Native.

Install

npm install border-beam

Usage

import { BorderBeam } from 'border-beam';
<BorderBeam>
  <YourCard>Content</YourCard>
</BorderBeam>

Props

• size — sm | md | lg (Large, Small, or Line type)
• colorVariant — colorful | mono | ocean | sunset
• strength — 0–1 (e.g. 0.7 = 70%)

Example

<BorderBeam size="md" colorVariant="colorful" strength={0.7}>
  <Card>Content</Card>
</BorderBeam>

How to use

1. npm install border-beam
2. Import BorderBeam and wrap any element.
3. Pick a size, color variant, and strength in the playground.
4. Copy the generated code and ship.