NewAI SDK Agents

BorderBeamButton

PreviousNext

Animated border beam around the shadcn Button — text and icon variants powered by the Border Beam package.

Border beam

Button + traveling glow

className targets the shadcn Button; borderBeamClassName styles the beam wrapper. Use colorVariant, beamSize, and active to tune the effect.

Button variants

Outline and secondary read well against the beam; default adds a stronger fill.

Beam color

Same outline button; swap the beam palette.

Beam size

sm keeps a tight glow on controls; md is fuller; line is a bottom traveling accent.

Icon buttons

Icon buttons default to icon sizing; pair with lucide icons.

Interactive

Toggle the beam without hiding the button. Respects prefers-reduced-motion.

Tip: pause leaves the button fully clickable; the glow stops.

Installation

pnpm dlx shadcn@latest add https://cult-ui.com/r/border-beam-button.json

Usage

BorderBeamButton wraps the standard Button with BorderBeam from the border-beam package. Pass any Button props as usual. Use className for the button surface and borderBeamClassName (or borderBeamStyle) for the beam wrapper.

  • BorderBeamButton — default beamSize="sm" for a tight glow on controls.
  • BorderBeamIconButton — same API, with size defaulting to icon-sm for icon-only actions.
import {
  BorderBeamButton,
  BorderBeamIconButton,
} from "@/components/ui/border-beam-button"
import { Sparkles } from "lucide-react"
<BorderBeamButton type="button" variant="outline">
  Outline
</BorderBeamButton>
 
<BorderBeamIconButton
  type="button"
  variant="outline"
  aria-label="Sparkles"
>
  <Sparkles className="size-3" />
</BorderBeamIconButton>

Beam options

The component forwards the main BorderBeam controls: beamSize, theme, colorVariant, staticColors, duration, active, borderRadius, brightness, saturation, hueRange, strength, onActivate, and onDeactivate. See the Border Beam documentation for behavior and examples.

Credits

The animated border effect comes from Border Beam by Jakub Antalík. Documentation, demos, and the underlying React package are available at beam.jakubantalik.com.