Border Beam is Ant Design's BorderBeam, installed into your project as a file you own. It takes the same props, plus reverse to run the beam counterclockwise. The effect is pure CSS, so it costs no animation frame.
Install
npx antuikit@latest init
npx antuikit@latest add border-beam
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/border-beam, not from antd. The file lives in your project once installed.
import { BorderBeam } from "@/components/ui/border-beam"
The axes
Border Beam has none. color, size, lineWidth, duration, outset and count each take a value, so there is no variant, size scale or preset to pick. The beam takes its corner radius from the element it wraps.
Flags
reverse is the one boolean prop. It runs the beam counterclockwise, head first. There is no disabled or paused, so the beam runs from the moment it mounts until the reader's reduced motion setting hides it.
To show and hide a beam, render BorderBeam or leave it out. To pause it, add before:[animation-play-state:paused] to className.
Slots
children is the element the beam is drawn inside. BorderBeam renders no element of its own.
It must be an HTML element, or a component that forwards its ref to one. An SVG child gets no beam.
It must be position: relative, or the beam escapes to the nearest positioned ancestor.
A component that ignores ref renders no beam and no warning.
Events
Border Beam has no event props. The API table below lists every prop it takes.
Styling
Border Beam has no classNames keys. className and style go to the beam layer, not the child, once per beam in count. The moving head is the layer's ::before, which before: classes reach.
API Reference
BorderBeam
BorderBeam's props. Rows marked antuikit in the Version column are added by the kit.