NK

Search

Search pages, posts, and components

All components

Glow Card

Background Effects

Card with a radial highlight that tracks the pointer.

Ledger UI Kit

60+ accessible components.

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/glow-card.json
Or install manually
  1. 1. Install dependencies

    pnpm add clsx tailwind-merge
  2. 2. Copy the component source into components/library/glow-card.tsx

Props

PropTypeDefaultDescription
classNamestring - Classes applied to the card.

Accessibility

  • The glow layer is decorative and pointer-events-none.
  • Content sits above the effect and stays fully selectable.

Dependencies

clsxtailwind-merge