HoverCard

A card container that lifts, scales, and casts a colored shadow on hover. Use it to make grids feel tactile without writing bespoke CSS.

Interactive Demo

Hover any card to see the lift, scale, and shadow combination.

Usage

import { HoverCard } from "@mantleui/react/motion";

<HoverCard
  lift={8}
  scale={1.02}
  shadowColor="rgba(168,85,247,0.35)"
  className="rounded-xl border border-zinc-800 bg-zinc-900 p-6"
>
  <h3>Default lift</h3>
  <p>Balanced values for most dashboard cards.</p>
</HoverCard>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Card content.
`lift`	`number`	`8`	Lift distance in pixels on hover.
`scale`	`number`	`1.02`	Scale factor on hover.
`shadowColor`	`string`	`"rgba(0,0,0,0.15)"`	Shadow color on hover.

children

ReactNode

Card content.

lift8

number

Lift distance in pixels on hover.

scale1.02

number

Scale factor on hover.

shadowColor"rgba(0,0,0,0.15)"

string

Shadow color on hover.