Docs
Card Hover Effect

Card Hover Effect

Displays a beautiful Card Hover Effect.

Loading...

Installation

Install the following dependencies:

npm install framer-motion

Install the shadcn/ui dependencies:

You need to install shadcn components, like this:

npx shadcn@latest add card

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Event Calendar code into your project.

API Reference

Props

The HoverEffect component creates a grid of interactive cards with a hover effect.

PropTypeDescription
itemsArray<{ title: string, description: string, link: string }>An array of objects representing the cards to display.
classNamestringOptional custom class for the HoverEffect component.

Item Object Properties

Each item in the items array should have the following properties:

PropertyTypeDescription
titlestringThe title of the card.
descriptionstringThe description text for the card.
linkstringThe URL that the card should link to when clicked.

Usage

export default function Demo() {
  return (
    <div className="max-w-5xl mx-auto px-8">
      <HoverEffect items={projects} />
    </div>
  )
}
const projects = [
  {
    title: "OpenAI",
    description:
      "An AI research and deployment company dedicated to ensuring artificial general intelligence benefits all of humanity.",
    link: "#",
  },
  // ... more projects
]
Hover CardGallery Card