# Glow Card Grid
Display cards with glowing border and background effects.
```tsx
import {
GlowCard,
GlowCardGrid,
} from "@/components/glow-card-grid"
export default function GlowCardGridDemo() {
return (
{CARDS.map((card) => (
))}
)
}
const CARDS = [
{
name: "shadcn",
handle: "@shadcn",
avatar: "https://unavatar.io/x/shadcn",
},
{
name: "OrcDev",
handle: "@orcdev",
avatar: "https://unavatar.io/x/orcdev",
},
{
name: "David Haz",
handle: "@davidhdev",
avatar: "https://unavatar.io/x/davidhdev",
},
{
name: "Shu",
handle: "@shuding",
avatar: "https://unavatar.io/x/shuding",
},
{
name: "Emil Kowalski",
handle: "@emilkowalski",
avatar: "https://unavatar.io/x/emilkowalski",
},
{
name: "Chánh Đại",
handle: "@iamncdai",
avatar: "https://unavatar.io/x/iamncdai",
},
]
```
## Installation
```bash
npx shadcn@latest add @ncdai/glow-card-grid
```
Install the following dependencies
```bash
npm install clsx tailwind-merge
```
Add a cn helper
```ts title="lib/utils.ts"
import type { ClassValue } from "clsx"
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs))
}
export function absoluteUrl(path: string) {
return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
}
```
Copy and paste the following code into your project
```tsx title="components/glow-card-grid.tsx"
"use client"
import { useEffect, useRef } from "react"
import { cn } from "@/lib/utils"
export type GlowCardGridProps = React.ComponentPropsWithoutRef<"div"> & {
// Card parameters
cardRadius?: number
// Icon parameters
iconBlur?: number
iconSaturate?: number
iconBrightness?: number
iconScale?: number
iconOpacity?: number
// Border parameters
borderWidth?: number
borderBlur?: number
borderSaturate?: number
borderBrightness?: number
borderContrast?: number
children: React.ReactNode
}
export function GlowCardGrid({
cardRadius = 16,
iconBlur = 25,
iconSaturate = 5.0,
iconBrightness = 1.3,
iconScale = 4,
iconOpacity = 0.3,
borderWidth = 3,
borderBlur = 10,
borderSaturate = 4.2,
borderBrightness = 2.5,
borderContrast = 2.5,
className,
style,
...props
}: GlowCardGridProps) {
const gridRef = useRef(null)
useEffect(() => {
const handlePointerMove = (event: PointerEvent) => {
if (!gridRef.current) return
const cards = gridRef.current.querySelectorAll(
"[data-slot='glow-card']"
)
cards.forEach((card) => {
const rect = card.getBoundingClientRect()
const centerX = rect.left + rect.width / 2
const centerY = rect.top + rect.height / 2
const x = (event.clientX - centerX) / (rect.width / 2)
const y = (event.clientY - centerY) / (rect.height / 2)
card.style.setProperty("--pointer-x", x.toFixed(3))
card.style.setProperty("--pointer-y", y.toFixed(3))
})
}
document.addEventListener("pointermove", handlePointerMove)
return () => document.removeEventListener("pointermove", handlePointerMove)
}, [])
return (
)
}
export type GlowCardProps = {
name: string
handle: string
avatar: string
className?: string
}
export function GlowCard({ name, handle, avatar, className }: GlowCardProps) {
return (
)
}
```
Update the import paths to match your project setup
## Usage
```tsx
import { GlowCard, GlowCardGrid } from "@/components/glow-card-grid"
```
```tsx
```
## Composition
Use the following composition to build a `GlowCardGrid`
```text
GlowCardGrid
└── GlowCard
```
## API Reference
### GlowCard
### GlowCardGrid
## Examples
### Tuning Effect Parameters
This example shows how to use DialKit to create live controls for fine-tuning the glow effect parameters in real-time.
[View live demo](/preview/glow-card-grid-dialkit)
Install DialKit in your project
Follow the [DialKit installation guide](https://joshpuckett.me/dialkit#installation) to add it to your project.
Create interactive controls with the useDialKit hook
Use the hook to define parameter ranges and pass them to your component as props.
```tsx
import { useDialKit } from "dialkit"
import { GlowCard, GlowCardGrid } from "@/components/glow-card-grid"
```
```tsx
const params = useDialKit("GlowCard", {
cardRadius: [16, 0, 32, 1],
icon: {
blur: [25, 0, 100, 1], // [default, min, max, step]
saturate: [5.0, 0, 10, 0.1],
brightness: [1.3, 0, 4, 0.1],
scale: [4, 1, 6, 0.1],
opacity: [0.3, 0, 1, 0.01],
},
border: {
width: [3, 1, 6, 1],
blur: [10, 0, 100, 1],
saturate: [4.2, 0, 10, 0.1],
brightness: [2.5, 0, 4, 0.1],
contrast: [2.5, 0, 3, 0.1],
},
})
```
Customize the parameters until you are satisfied with the result
## Credits
* [@jh3yy](https://x.com/jh3yy/status/1992003440579662211)
## References
* [DialKit](https://joshpuckett.me/dialkit)
Last updated on March 30, 2026