Glow Border

Installation$

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.

A rotating conic glow circles an integration card. The face inside follows the ambient style (glinr by default); variant="glass" is opt-in.

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 { GlowBorder } from "@glinui/ui"
// Omit variant to follow the ambient style (glinr by default).
export function GlowBorderVariants() {

import { GlowBorder } from "@glinui/ui"


// Omit variant to follow the ambient style (glinr by default).
export function GlowBorderVariants() {
return (
  <>
    <GlowBorder variant="glinr" glowSize={3}>
      ...
    </GlowBorder>
    <GlowBorder variant="plain" glowSize={3}>
      ...
    </GlowBorder>
    <GlowBorder variant="solid" glowSize={3}>
      ...
    </GlowBorder>
    <GlowBorder variant="glass" glowSize={3}>
      ...
    </GlowBorder>
  </>
)
}

Colors$

glowColor takes any token or color.

import { GlowBorder } from "@glinui/ui"
export function GlowBorderTones() {
return (

import { GlowBorder } from "@glinui/ui"


export function GlowBorderTones() {
return (
  <GlowBorder glowColor="var(--tone-success)" glowSize={3}>
    ...
  </GlowBorder>
)
}

In a layout$

A pricing row where the highlighted plan wears the glow.

// A pricing row where the highlighted plan wears the glow.
import { GlowBorder } from "@glinui/ui"
export function GlowBorderLayout() {

// A pricing row where the highlighted plan wears the glow.
import { GlowBorder } from "@glinui/ui"


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

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$

Source$

import { GlowBorder } from "@glinui/ui"