Hover Highlight Cards

As the mouse moves, a highlight background slides with a spring animation from the previous card to the one currently pointed at; keyboard focus triggers it too.

Loading preview…

npx shadcn@latest add https://webberui.com/r/hover-highlight-cards.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Columnscolumns

Highlight backgroundhighlightClassName

Spring stiffnessstiffness

260

Spring dampingdamping

<HoverHighlightCards />

Installation

npx shadcn@latest add https://webberui.com/r/hover-highlight-cards.json

Or, once registries are configured in components.json, install it as @webberui/hover-highlight-cards.

Usage

import { HoverHighlightCards } from "@/components/ui/hover-highlight-cards";

<HoverHighlightCards
  columns={2}
  items={[
    { title: "Animation first", description: "Reveal and interaction motion built in and dialed in." },
    { title: "Install and go", description: "One command adds it to your project." },
  ]}
/>;

Each item can carry an icon (any React node) and an href; when href is present the card renders as a link.

Props

Prop	Type	Default	Description
`items`	`HoverHighlightItem[]`	—	Card data; see the fields in the table below
`columns`	`1 \| 2 \| 3 \| 4`	`3`	Number of columns on desktop
`highlightClassName`	`string`	`"bg-neutral-200/70 …"`	Background styles of the highlight block
`stiffness`	`number`	`260`	Spring stiffness of the highlight's slide
`damping`	`number`	`30`	Spring damping of the highlight's slide
`className`	`string`	—	Extra styles for the outer grid

HoverHighlightItem

Field	Type	Description
`title`	`string`	Card title
`description`	`string`	Card description (optional)
`icon`	`React.ReactNode`	Icon in the top-left corner (optional)
`href`	`string`	Link URL; when set, the card is an `a` (optional)

Accessibility

When the user has "reduce motion" enabled at the system level, the highlight does not slide with a spring and simply fades in and out
Cards can be focused with the keyboard to trigger the highlight, and carry a focus-visible outline
The highlight block is marked aria-hidden, so it does not affect what assistive technology announces