FX · Interactions

A card whose surface lights up under the pointer, and around keyboard focus.

Keyboard ready

Move the pointer over the card, or tab to the link.

Learn more

Pointer aware

Move the pointer over the card, or tab to the link.

Learn more
bash
npx shadcn@latest add https://www.rad-ui.com/r/glow-card.json
React
import GlowCard from "@/components/fx/glow-card" <GlowCard className="rounded-2xl border p-6">…</GlowCard>
  • The glow layer is aria-hidden; the card adds no roles or tab stops of its own.
  • Focus inside the card lights it too, so keyboard users get the same affordance.
  • Check text contrast with the glow at full strength.
PropTypeDefaultDescription
glowColor
string
sky, 25%

Glow colour.

radius
number
320

Glow radius in px.

...props
ComponentProps<'div'>
—

Passed to the card.