Glow Border

For the focused field, the selected plan or the active session; fades with `active`.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add glow-border

Usage

Example

import { GlowBorder } from "@/components/galactrex/glow-border";

<div className="relative rounded-xl p-6"><GlowBorder active={selected} />Creative</div>

Source

Installs to components/galactrex/glow-border.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`active`	`boolean`	`true`	Glowing while true.
`blur`	`number`	`18`	Blur in px.
`breathe`	`boolean`	`true`	Slow breathing.
`color`	`string`	—	Any CSS colour; defaults to a theme token.
`className`	`string`	—	Extra classes for the outer element.

Variants

Selected. Bind `active` to selection.

Accessibility

Decorative; selection must also be stated.

Motion and reduced motion

Opacity only.
Reduced motion: steady.