1 variant

Border Beam

Name: easeUI Pro
Price: 99.00 USD

A light that travels round an element's border while something is working, or a soft ring that holds still.

Writing the migration plan…

usage.tsx

import { BorderBeam } from "@/components/registry/border-beam";

export function Composer({ isStreaming }) {
  return (
    <BorderBeam active={isStreaming} radius={16}>
      <PromptInput />
    </BorderBeam>
  );
}

"use client";

import { motion, useInView, useReducedMotion } from "motion/react";
import { type ReactNode, useRef } from "react";
import { cn } from "@/lib/utils";

export interface BorderBeamProps {
  children: ReactNode;
  /** Runs the beam. Drive it from real state, such as a streaming flag. Default true. */
  active?: boolean;
  /** "travel" sends a light round the edge; "glow" holds a soft ring in place. Default "travel". */
  variant?: "travel" | "glow";

67 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/border-beam