Signature / Moleculestable

Border Beam

Light beam that travels along the border of its container via CSS offset-path.

@glinui/uiComponent: border-beam

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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.

Basic$

TSX

1import { BorderBeam } from "@glinui/ui"
2
3export function BorderBeamDemo() {
4return (
5  <div className="relative h-40 w-full max-w-md rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <BorderBeam />
7  </div>
8)
9}

Examples$

Custom Colors$

TSX

1import { BorderBeam } from "@glinui/ui"
2
3export function BorderBeamColorDemo() {
4return (
5  <div className="relative h-40 w-full max-w-md rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <BorderBeam colorFrom="#6366f1" colorTo="#a855f7" />
7  </div>
8)
9}

Slow Duration$

TSX

1import { BorderBeam } from "@glinui/ui"
2
3export function BorderBeamSlowDemo() {
4return (
5  <div className="relative h-40 w-full max-w-md rounded-xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-950">
6    <BorderBeam duration={12} size={150} />
7  </div>
8)
9}

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$

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`-`	Auto-generated from TypeScript source.
`colorFrom`	`string`	No	`"var(--color-accent)"`	Auto-generated from TypeScript source.
`colorTo`	`string`	No	`"transparent"`	Auto-generated from TypeScript source.
`delay`	`number`	No	`0`	Auto-generated from TypeScript source.
`duration`	`number`	No	`6`	Auto-generated from TypeScript source.
`size`	`number`	No	`100`	Auto-generated from TypeScript source.

Source$

TSX

1import { BorderBeam } from "@glinui/ui"

packages/ui/src/components/border-beam.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/border-beam.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

BorderBeamProps

`BorderBeamProps`

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`-`	-
`colorFrom`	`string`	No	`"var(--color-accent)"`	-
`colorTo`	`string`	No	`"transparent"`	-
`delay`	`number`	No	`0`	-
`duration`	`number`	No	`6`	-
`size`	`number`	No	`100`	-