Border Beam Search

Component 545

About

Animated border beam effect for React using the line preset — a bottom-only traveling glow that sweeps along the edge. This demo wraps a rounded search bar.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Border Beam Search to your project and fits it to your theme.

Code

How Border Beam Search is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

function SearchIcon() {
  return (
    <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.4, flexShrink: 0 }}>
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  );
}

function SearchBar() {
  return (
    <div style={{ width: 366, maxWidth: "100%", height: 42, borderRadius: 64, overflow: "hidden", position: "relative", fontFamily: "system-ui, -apple-system, sans-serif" }}>
      <div
        style={{
          position: "absolute",
          inset: 0,
          borderRadius: 20,
          background: "#1d1d1d",
          boxShadow: "inset 0 0 0 1px rgba(44,47,54,0.52), inset 0 0 50px 0 rgba(255,255,255,0.02)",
          display: "flex",
          alignItems: "center",
          padding: "0 13px",
          gap: 10,
          color: "#565656",
        }}
      >
        <SearchIcon />
        <span style={{ fontSize: 15, lineHeight: "18px", color: "#565656" }}>Search</span>
      </div>
    </div>
  );
}

export default function Default() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 600,
        maxWidth: "100%",
        minHeight: 360,
        margin: "0 auto",
        background: "#0d0d0f",
        borderRadius: 24,
      }}
    >
      <BorderBeam size="line" colorVariant="colorful" duration={3.1} borderRadius={20}>
        <SearchBar />
      </BorderBeam>
    </div>
  );
}