Signature / Moleculestable

Glow Border

Rotating conic-gradient glow effect around container border.

@glinui/uiComponent: glow-border

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

Usage$

Wrap any content with GlowBorder to apply a continuously rotating conic-gradient glow along the border. The glow is rendered via a CSS @property-animated conic gradient positioned behind the content.

Basic$

Glow Border

Rotating conic-gradient glow around the border.

TSX

1import { GlowBorder } from "@glinui/ui"
2
3export function GlowBorderDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <GlowBorder>
7      <div className="p-6">
8        <h3 className="text-lg font-semibold">Glow Border</h3>
9        <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
10          Rotating conic-gradient glow around the border.
11        </p>
12      </div>
13    </GlowBorder>
14  </div>
15)
16}

Examples$

Custom Glow Color$

Pass any valid CSS color to glowColor to match your brand palette.

Indigo Glow

Custom glow color via the glowColor prop.

TSX

1import { GlowBorder } from "@glinui/ui"
2
3export function GlowBorderColorDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <GlowBorder glowColor="#6366f1">
7      <div className="p-6">
8        <h3 className="text-lg font-semibold">Indigo Glow</h3>
9        <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
10          Custom glow color via the glowColor prop.
11        </p>
12      </div>
13    </GlowBorder>
14  </div>
15)
16}

Slow Duration$

Increase duration to create a more subtle, languid rotation effect.

Slow Glow

8-second rotation for a calm, ambient effect.

TSX

1import { GlowBorder } from "@glinui/ui"
2
3export function GlowBorderSlowDemo() {
4return (
5  <div className="flex items-center justify-center p-8">
6    <GlowBorder duration={8}>
7      <div className="p-6">
8        <h3 className="text-lg font-semibold">Slow Glow</h3>
9        <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
10          8-second rotation for a calm, ambient effect.
11        </p>
12      </div>
13    </GlowBorder>
14  </div>
15)
16}

Accessibility$

The glow pseudo-element is purely decorative and carries aria-hidden semantics — it does not affect the accessibility tree.
GlowBorder does not alter the focusability or tab order of its children.
Keyboard navigation passes through to child content unchanged.

Reduced Motion$

When prefers-reduced-motion: reduce is active, the rotating glow animation is hidden entirely so that users sensitive to motion are not affected.

API Reference$

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`"var(--radius-lg)"`	Border radius
`duration`	`number`	No	`4`	Rotation duration in seconds
`glowColor`	`string`	No	`"var(--color-accent)"`	Glow color
`glowSize`	`number`	No	`2`	Glow spread in px

Source$

TSX

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

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

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/glow-border.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

GlowBorderProps

`GlowBorderProps`

Prop	Type	Required	Default	Description
`borderRadius`	`string`	No	`"var(--radius-lg)"`	Border radius
`duration`	`number`	No	`4`	Rotation duration in seconds
`glowColor`	`string`	No	`"var(--color-accent)"`	Glow color
`glowSize`	`number`	No	`2`	Glow spread in px