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… › paste the URL (Branch: main) .package(url: "https://github.com/Jakubantalik/Libraries.dev", branch: "main") // …and in your target's dependencies: .product(name: "BorderBeamKit", package: "Libraries.dev")
Usage
import BorderBeamKit
BorderBeam(
borderRadius: 16
) {
Card()
}