Border beam
An animated rainbow glow that rides the border of any card, button or input.
Installation
npm install border-beam
Usage
import { BorderBeam } from 'border-beam';
<BorderBeam>
<YourCard>Content</YourCard>
</BorderBeam>
Installation
border-beam-native is not on npm yet — it lives in this repo at packages/border-beam/ports/react-native/border-beam-native. Expo needs expo run:ios / run:android (native modules).
npm install border-beam-native @shopify/react-native-skia react-native-reanimated
Usage
import { BorderBeam } from 'border-beam-native';
<BorderBeam>
<Card />
</BorderBeam>
Installation
Build through Xcode: the Metal shader is compiled by Xcode's build system, not by SwiftPM alone.
// Package.swift — or Xcode: File › Add Package Dependencies… › Add Local… .package(path: "packages/border-beam/ports/ios/BorderBeamKit")
Usage
import BorderBeamKit
BorderBeam(
borderRadius: 16
) {
Card()
}
Add the Beam effect from Libraries.dev to my React app.
Install:
npm install border-beam
Usage:
import { BorderBeam } from 'border-beam';
<BorderBeam size="md" colorVariant="colorful" strength={0.7}>
<YourCard>Content</YourCard>
</BorderBeam>
Props:
- size: "md" | "sm" | "line" | "pulse-inner" | "pulse-outside"
- colorVariant: "colorful" | "mono" | "ocean" | "sunset"
- strength: 0-1, glow intensity
- active: boolean, pauses the animation when false
- theme: "light" | "dark"
Beam wraps a child element and rides an animated glow around its border.
It ships zero runtime dependencies and needs React 18 or newer.
Docs: https://libraries.dev/beam.html