Border Beam

npx shadcn@latest add https://ui.saasflare.io/r/border-beam.json

pnpm add @saasflare/ui

"use client"import { BorderBeam } from "@saasflare/ui"/** A glowing beam that orbits the border of a card. */export function Demo() {    return (        <div className="relative h-64 w-full overflow-hidden rounded-lg border bg-fd-card p-8">            <BorderBeam />            <h3 className="text-lg font-semibold">Pro plan</h3>            <p className="mt-1 text-sm text-muted-foreground">                Unlimited projects, priority support, and advanced analytics.            </p>        </div>    )}

"use client"import { BorderBeam } from "@saasflare/ui"/** Tune the beam color, length, and orbit speed. */export function Demo() {    return (        <div className="relative h-64 w-full overflow-hidden rounded-lg border bg-fd-card p-8">            <BorderBeam color="hsl(var(--chart-1))" duration={8} size={200} />            <h3 className="text-lg font-semibold">Enterprise</h3>            <p className="mt-1 text-sm text-muted-foreground">                SSO, audit logs, and a dedicated success manager.            </p>        </div>    )}