Border Beam

Installation$

pnpm dlx @glinui/cli@latest add border-beam

Usage$

Wrap any container with position: relative and place BorderBeam inside. The beam travels along the border using CSS offset-path.

A beam of accent light travels the edge of a glinr metrics card. The beam is a decorative overlay, so the card underneath keeps its normal surface.

Examples$

Variants$

glinr is the default, plain is the flat shadcn look, solid is a neutral tonal face and glass is opt-in. Glass needs a backdrop, so the set below sits on a vivid one.

import { BorderBeam, Card } from "@glinui/ui"
// Omit variant to follow the ambient style (glinr by default).
export function BorderBeamVariants() {

import { BorderBeam, Card } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function BorderBeamVariants() {
return (
  <>
    <Card variant="glinr" className="relative">
<BorderBeam size={180} />
      ...
    </Card>
    <Card variant="plain" className="relative">
<BorderBeam size={180} />
      ...
    </Card>
    <Card variant="solid" className="relative">
<BorderBeam size={180} />
      ...
    </Card>
    <Card variant="glass" className="relative">
<BorderBeam size={180} />
      ...
    </Card>
  </>
)
}

Colors$

colorFrom takes any token or color.

import { BorderBeam, Card } from "@glinui/ui"
export function BorderBeamTones() {
return (

import { BorderBeam, Card } from "@glinui/ui"


export function BorderBeamTones() {
return (
  <Card className="relative">
<BorderBeam colorFrom="var(--tone-success)" />
    ...
  </Card>
)
}

In a layout$

Beam cards as metric tiles in a dashboard row.

// Beam cards as metric tiles in a dashboard row.
import { BorderBeam, Card } from "@glinui/ui"
export function BorderBeamLayout() {

// Beam cards as metric tiles in a dashboard row.
import { BorderBeam, Card } from "@glinui/ui"


export function BorderBeamLayout() {
return (
  <section className="grid gap-4 sm:grid-cols-3">
    ...
  </section>
)
}

Engines$

The engine prop is not applicable. Looping offset-path beam in css; path driven. It stays css only and still honors motion level none and reduced motion.

Accessibility$

• BorderBeam is purely decorative and does not receive focus.
• No interactive elements, safe for screen readers.

Reduced Motion$

The beam animation uses motion-reduce:hidden. Under prefers-reduced-motion, the beam is hidden entirely.

API Reference$

Source$

import { BorderBeam } from "@glinui/ui"