docs / core / glow-card

GlowCard

a Card whose border lights up on the edge facing the pointer, so a single card earns the directional glow BentoGrid shares across a whole grid. it takes every Card prop.

intensity · recedesrsc · server

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

the one card on a view that earns the pointer glow, a hero or a highlighted tieranywhere a plain Card goes: it is a drop-in with a lit edgenever a grid of them. shared glow across many cells is BentoGridnot on a touch-first surface. the glow needs a pointer to follow

a11y

the glow layer is aria-hidden · everything else is a plain Cardjest-axe

dependencies

Card from the same package
live demo · try it out

interactive

hover near the edges

Move your cursor toward the border. The lit arc turns to follow the pointer.

customize
surfaceshares Card's surface scale
eyebrowmono label
titlethe card heading
usagecopy
import { CardBody, CardEyebrow, CardHeader, CardTitle, GlowCard } from "@usva-ui/react/primitives/card";

<GlowCard>
  <CardHeader>
    <CardEyebrow>interactive</CardEyebrow>
    <CardTitle>hover near the edges</CardTitle>
  </CardHeader>
  <CardBody>Move your cursor toward the border.</CardBody>
</GlowCard>

props

proptypedefaultnotes
…CardPropsCardProps—every Card prop applies: surface, highlight, interactive, and the rest.

get it

bun add @usva-ui/reactcopy
usagecopy
import { CardBody, CardHeader, CardTitle, GlowCard } from "@usva-ui/react/primitives/card";

<GlowCard>
  <CardHeader>
    <CardTitle>Featured</CardTitle>
  </CardHeader>
  <CardBody>Move your cursor toward the border.</CardBody>
</GlowCard>