Glow border

Installation

$ npx shadcn@latest add https://goodui.dev/r/glow-border.json

The file lands in components/goodui/glow-border.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/glow-border works too.

Usage

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

export function PlanCard({ selected, onSelect }: { selected: boolean; onSelect: () => void }) {
  return (
    <GlowBorder active={selected} innerClassName="p-6">
      <h3 className="font-semibold">Business</h3>
      <p className="mt-2 text-3xl font-bold">$99<span className="text-base font-normal text-muted-foreground">/month</span></p>
      <p className="mt-2 text-sm text-muted-foreground">Unlimited locations, priority support, API access.</p>
      <button
        type="button"
        onClick={onSelect}
        aria-pressed={selected}
        className="mt-6 h-10 w-full rounded-lg bg-primary text-sm font-medium text-primary-foreground"
      >
        {selected ? "Selected" : "Choose Business"}
      </button>
    </GlowBorder>
  )
}

When to use

Examples

<GlowBorder colors={["#a855f7", "#ec4899", "#f59e0b"]} innerClassName="p-2" duration={4}>
  <textarea
    aria-label="Describe the job"
    placeholder="3-bed move-out clean, Friday morning, pets in the house…"
    className="min-h-24 w-full resize-none bg-transparent p-2 text-sm outline-none"
  />
</GlowBorder>

API reference

Accessibility

• •Two plain <div>s (border and inner surface); the glow is a pseudo-element that ignores the pointer and is not announced.
• •The glow strengthens on :focus-within, so keyboard users get the same emphasis as hover.
• •active is visual only: if it means "selected", also expose it on the control (aria-pressed, a radio, or text).

Motion

• •A conic gradient arc covering about half of the circle rotates around the border once every `duration` s (6), linear; a blurred copy (`blur` px, 14) glows behind it.
• •On hover, focus inside, or when active, the glow rises from `restOpacity` (0.25) to `hoverOpacity` (0.75) and blurs 1.4x more, over 0.4 s. In dark mode the resting glow is 1.6x stronger.
• •Rotation pauses while the card is off-screen.
• •Reduced motion: the arc stops rotating and the glow change is instant. Browsers without @property support show the arc without rotation.

• •CSS only, animating one registered custom property; an IntersectionObserver pauses it off-screen. The blurred glow costs paint time, so keep it to a few cards per screen.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related