Border Beam Input

Renders input fields with a border glow effect. Behaves by applying a dynamic or static border glow based on size. Use for styled input fields with visual emphasis.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/border-beam-input

npx layro-cli add @nolly-studio/border-beam-input

npx layro-cli add @nolly-studio/border-beam-input

bunx layro-cli add @nolly-studio/border-beam-input

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client"

/**
 * `border-beam` around `InputPrimitive` or `InputGroup` — default `beamSize="line"` bottom-travel glow.
 * `className` is merged onto both the beam wrapper and the inner control so width constraints match.
 * The wrapper is a column flex shell (`borderBeamFieldShellClass`) so the beam box stretches to the
 * same width as the control in flex layouts. Note: `beamSize="line"` draws a traveling spot along the
 * bottom (not a static full-width bar); use `beamSize="md"` for a full border glow.
 *
 * `BorderBeamInput` uses `@base-ui/react/input` directly (not `components/ui/input`) so styling is
 * controlled here via `borderBeamInputPrimitiveClass` and `className`.
 */
import type { ComponentProps, CSSProperties } from "react"
import { forwardRef } from "react"