Card Hover Effect
Link-card grid with a highlight that glides to whichever card you hover or focus.
- 1.7 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
- QuickstartInstall the CLI and add your first component in under a minute.
- ThemingRe-skin every component by changing seven CSS variables.
- AccessibilityKeyboard support, reduced motion and screen reader notes for each part.
- RegistryPull components straight into your codebase with the shadcn CLI.
- ExamplesCopy-paste sections built from the library, ready to adapt.
- ChangelogEvery release, what changed, and how to upgrade safely.
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/card-hover-effect.jsonAdds components/velora/card-hover-effect.tsx, installs motion.
Examples
Integrations grid
Four columns of service cards with lucide icons.
Plugs into your stack
Connect the services you already use in a couple of clicks.
Props
| Prop | Type | Default |
|---|---|---|
items*The link cards, in order | HoverCardItem[] | — |
columnsColumn count once the container is wide enough (container queries) | 1 | 2 | 3 | 4 | 3 |
Also accepts every <div> attribute, forwarded to the root element.
HoverCardItem
interface HoverCardItem {
/** Card heading */
title: string;
/** One or two sentences under the title */
description: string;
/** Link target; the whole card is the link */
href: string;
/** Optional leading icon, e.g. a lucide-react element */
icon?: React.ReactNode;
}Accessibility
- Reduced motion
- The highlight appears on the hovered or focused card and disappears instantly, without gliding or fading; the arrow nudge is removed.
- Keyboard
- Each card is a native link in Tab order; focusing one moves the highlight to it, and it clears when focus leaves the grid.
- Screen readers
- Cards are links in a list, named by their title and description text; icons, the arrow and the highlight are aria-hidden.