Glow Card Grid

Display cards with glowing border and background effects.

shadcn

@shadcn

OrcDev

@orcdev

David Haz

@davidhaz

Shu

@shuding

Emil Kowalski

@emilkowalski

Chánh Đại

@iamncdai

Loading…

Use cases

Team member grid on an about page.
Feature cards on a landing page.

Installation

pnpm dlx shadcn@latest add @ncdai/glow-card-grid

Usage

import { GlowCard, GlowCardGrid } from "@/components/glow-card-grid"

<GlowCardGrid>
  <GlowCard />
</GlowCardGrid>

Composition

Use the following composition to build a GlowCardGrid

GlowCardGrid
└── GlowCard

API reference

GlowCard

Prop

Type

GlowCardGrid

Prop

Type

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

Install DialKit in your project

Follow the DialKit installation guide 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.

import { useDialKit } from "dialkit"
 
import { GlowCard, GlowCardGrid } from "@/components/glow-card-grid"

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],
  },
})
 
<GlowCardGrid
  // Card parameters
  cardRadius={params.cardRadius}
  // Icon parameters
  iconBlur={params.icon.blur}
  iconSaturate={params.icon.saturate}
  iconBrightness={params.icon.brightness}
  iconScale={params.icon.scale}
  iconOpacity={params.icon.opacity}
  // Border parameters
  borderWidth={params.border.width}
  borderBlur={params.border.blur}
  borderSaturate={params.border.saturate}
  borderBrightness={params.border.brightness}
  borderContrast={params.border.contrast}
>
  <GlowCard />
  <GlowCard />
  <GlowCard />
</GlowCardGrid>