BorderBeam

A beam of light that travels round the border of a card or container.

Installation

bash

npx @smicolon/cli add border-beam

Run init once per project before adding components. See Installation.

Preview

Autumn sale ends tonight

Up to 30% off linen and wool.

Static glowing border

To highlight a card without motion, use GlowingBorder instead of the beam. It draws a still coloured border with a soft glow close to it.

Autumn sale ends tonight

Up to 30% off linen and wool.

Accessibility

The beam is decoration and ignores the pointer; the content inside works as usual.
With prefers-reduced-motion set, the beam is replaced by a still border at half strength.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content inside the border.
`duration`	`number`	`4`	Seconds for one lap.
`borderWidth`	`number`	`2`	Width of the beam in pixels.
`colorFrom`	`string`	`"var(--primary)"`	Colour at the head of the beam.
`colorTo`	`string`	`"transparent"`	Colour the beam fades to.
`delay`	`number`	`0`	Seconds before it starts.
`GlowingBorder`	`{ glowColor, borderRadius, intensity: "sm" \| "md" \| "lg" }`	—	A still coloured border with a tight glow.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { BorderBeam, GlowingBorder } from "@/components/ui/border-beam"

<BorderBeam className="rounded-xl" duration={3}>
  <div className="p-6">Autumn sale ends tonight</div>
</BorderBeam>

<GlowingBorder glowColor="var(--chart-2)" intensity="lg">
  <div className="p-6">Autumn sale ends tonight</div>
</GlowingBorder>