Glow Card

An ambient bloom behind the card that widens on hover — not pointer-tracked.

cards
glow
card
effect
ambient
hover

Studio plan

A halo that widens on hover.

Quick usage

usage

import { GlowCard } from "@pinky-ui/components";

<GlowCard color="var(--color-cloud-300)">
  <BasicCard title="Studio plan" />
</GlowCard>

Presets

Blush

The default.

Cloud

A cooler read.

color={"var(--color-cloud-300)"}

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell

npm install @pinky-ui/components

shell

pnpm add @pinky-ui/components

shell

yarn add @pinky-ui/components

shell — copies source into your project

npx pinky-ui add glow-card

Prefer to run the whole repository locally instead?

repository

git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

Prop	Type	Default	Description
children	ReactNode	—	Required.
color	string	var(--color-blush-300)	Glow colour.
radius	"md" \| "lg" \| "xl" \| "2xl"	"xl"	Corner radius from the shape scale.
as	ElementType	"div"	Pass Link from next/link to make the whole card navigable.
href	string	—	Only meaningful when as renders an anchor.
onClick	() => void	—	Makes the card a click target; adds the focus-visible ring automatically.

Accessibility

Same focus-visible rule as Basic Card once onClick/href is present.
The glow is decorative and aria-hidden.

Reduced motion

The glow is visible at rest either way; only its widening on hover is skipped under prefers-reduced-motion: reduce.

When to use

A card that should read as lit from within, independent of exactly where the pointer is

When not to use

A surface that should light up specifically where the pointer touches it — Spotlight Card or Glow Border