Glow Border

A border that lights up where the pointer is.

effects
glow
border
light
gradient
focus

Studio

$24 / month

Move closer — the edge finds your pointer.

Quick usage

usage

import { GlowBorder } from "@pinky-ui/components";

<GlowBorder radius="xl">
  <article className="rounded-xl border border-line bg-white p-6">
    Pricing
  </article>
</GlowBorder>

Presets

Default

Blush into milk blue.

thickness={1.5} size={260} intensity={1}

Hairline

Thin and restrained, for dense layouts.

thickness={1} size={180} intensity={0.7}

Selected

Permanently lit, for the chosen item in a set.

thickness={2} size={320} intensity={1} active={true}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add glow-border

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
radius	"md" \| "lg" \| "xl" \| "2xl" \| "pill"	"xl"	Must match the radius of the content it wraps.
thickness	number	1.5	Border thickness in px.
size	number	260	Diameter of the travelling light pool, in px.
intensity	number	1	Peak brightness, 0–1.
from	string	blush-300	Inner light colour.
to	string	cloud-300	Outer light colour.
range	number	80	Distance outside the element where the light fades in, in px.
active	boolean	false	Keeps the border lit — use for selected or focused states.

Accessibility

The lit ring is decorative: aria-hidden and pointer-events: none.
Never used as the only signal for a selected state — pair it with text, aria-selected or aria-current.
Adds no layout box of its own, so it cannot shift content.

Reduced motion

With prefers-reduced-motion: reduce, the light stops following the pointer and the ring simply stays unlit unless `active` is set.

When to use

Pricing and plan cards
Selected states in a set of options
Framing a single hero surface

When not to use

Every card on a page — the effect stops meaning anything
As the sole indicator of selection or focus
Around low-contrast text where the light reduces legibility