Glow Border Card
A card component with a beautiful animated glow effect around its border. The glow follows your mouse movement creating an interactive, premium feel.
Premium Card
Hover to see the glow effect
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/glow-border-card.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/glow-border-card.tsx
Note: Install via CLI for the full source code. The component uses mouse tracking for the glow position.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Card content |
| className | string | - | Additional CSS classes |
| glowColor | string | 'rgba(255,255,255,0.3)' | Color of the glow effect |