Command Palette

Search for a command to run...

1.7k

Command Palette

Search for a command to run...

Blog

Glow Card Grid

Display cards with glowing border and background effects.

Loading…
import { GlowCard } from "@/components/glow-card-grid/glow-card"
import { GlowCardGrid } from "@/components/glow-card-grid/glow-card-grid"
 
export default function GlowCardGridDemo01() {
  return (
    <div className="w-full p-4">
      <GlowCardGrid>
        {CARDS.map((card) => (
          <GlowCard
            key={card.name}
            name={card.name}
            handle={card.handle}
            avatar={card.avatar}
          />
        ))}
      </GlowCardGrid>
    </div>
  )
}
 
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

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

Usage

import { GlowCard } from "@/components/glow-card"
import { 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 } from "@/components/glow-card"
import { GlowCardGrid } from "@/components/glow-card-grid/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>

Customize the parameters until you are satisfied with the result

References