Buttons

Border Beam Button

shadcn/ui Button with an animated border beam, in text and icon variants, for primary calls to action in React apps.

Updated Oct 1, 2026

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.

BorderBeamButton is a React button component for shadcn/ui built on the border-beam package. Use it for the primary call to action in AI prompt bars, onboarding flows, or upgrade prompts.

Installation


pnpm dlx shadcn@latest add @cult-ui/border-beam-button

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.