Glow Card
betaCard surfaces with a soft glow that follows the pointer, alone or continuously across a group.
- Display
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add glow-cardnpm packages installed: class-variance-authority, radix-ui.
import { GlowCardGroup } from "@/components/ui/glow-card";Default
Gallery
Tones
As Link
Spotlight
<GlowCardGroup>
| Prop | Type | Default |
|---|---|---|
radiusRadius of the glow in pixels. Cards may override it. | number | — |
Plus every attribute of <div>.
<GlowCard>
| Prop | Type | Default |
|---|---|---|
glowColorAny CSS colour for the glow, overriding | string | — |
intensityStrength of the tinted fill under the glow, 0–1. The ring is always full strength. | number | — |
radiusRadius of the glow in pixels. Defaults to the group's, or 200. | number | — |
tone | "primary" | "foreground" | "success" | "warning" | "info" | "destructive" | "primary" |
variant
| "glow" | "spotlight" | "glow" |
asChildRenders the child element as the card — a link or a button, say. | boolean | false |
Plus every attribute of <div>.
The glow is a decorative, aria-hidden, pointer-events-none layer, so the card's own content and semantics are untouched; use asChild to make the whole card a link or button. The pointer handler writes custom properties directly and never re-renders. The glow is off for touch input and under prefers-reduced-motion, where the layer is not displayed at all.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes