Border Glow

A cursor-proximity border glow effect. Drop <BorderGlow> around any Card — it adds a colorful gradient glow that follows the pointer along the border when the cursor approaches any edge. Inspired by React Bits’ Border Glow .

Installation

npx shadcn@latest add https://prismaui.com/components/border-glow.json

Import


import { BorderGlow } from '@/components/ui/border-glow';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card';

Preview

Move your cursor near the card edges to see the glow follow the pointer.

Border Glow

Move your cursor near the edges.

Wrap any Card with <BorderGlow> to add the glow effect.


<BorderGlow className='w-72'>
  <Card>
    <CardHeader>
      <CardTitle>Border Glow</CardTitle>
      <CardDescription>Move your cursor near the edges.</CardDescription>
    </CardHeader>
    <CardContent>...</CardContent>
    <CardFooter>
      <Button size='sm'>Action</Button>
    </CardFooter>
  </Card>
</BorderGlow>

Custom Colors

Pass three hex colors to glowColors to theme the gradient.

Warm tones

amber → red → orange

Cool tones

emerald → cyan → indigo


{
  /* Warm */
}
<BorderGlow glowColors={['#f59e0b', '#ef4444', '#f97316']}>
  <Card>...</Card>
</BorderGlow>;
 
{
  /* Cool */
}
<BorderGlow glowColors={['#34d399', '#06b6d4', '#6366f1']}>
  <Card>...</Card>
</BorderGlow>;

Animated Intro

Set animated to sweep the glow around the border once on mount.

Animated Intro

The glow sweeps once around the border on mount.


<BorderGlow className='w-72' animated>
  <Card>...</Card>
</BorderGlow>

Edge Sensitivity

edgeSensitivity (px) controls how far from the edge the glow activates.

Tight (10 px)

Glow only on the edge itself

Wide (80 px)

Activates anywhere near the edges


{
  /* Tight */
}
<BorderGlow edgeSensitivity={10}>
  <Card>...</Card>
</BorderGlow>;
 
{
  /* Wide */
}
<BorderGlow edgeSensitivity={80}>
  <Card>...</Card>
</BorderGlow>;

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content rendered inside (typically a Card).
`className`	`string`	—	Additional CSS classes for the outer wrapper.
`edgeSensitivity`	`number`	`30`	Distance in px from edge where glow activates.
`glowColors`	`[string, string, string]`	`['#c084fc','#f472b6','#38bdf8']`	Three hex colors for the gradient.
`borderRadius`	`number`	`12`	Corner radius — must match the child Card’s radius.
`glowRadius`	`number`	`40`	Outer glow spread in px beyond the card.
`glowIntensity`	`number`	`1`	Glow brightness multiplier (0.1 – 3.0).
`coneSpread`	`number`	`100`	Gradient radius controlling glow width along the border.
`animated`	`boolean`	`false`	Play a one-shot border sweep animation on mount.