Cards

Cards 564

About

Hover Reveal Cards Description: A responsive grid of cards that highlights the card currently being hovered or focused. The other cards subtly blur and fade into the background, creating a smooth and engaging user experience. The component is fully accessible via keyboard navigation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cards to your project and fits it to your theme.

Code

How Cards is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
// Adjust the import path according to your project structure.
import HoverRevealCards, { CardItem } from '@/components/ui/cards';

// Sample data for the demo, matching the structure of the CardItem interface.
const demoItems: CardItem[] = [
  {
    id: 1,
    title: 'Echoes',
    subtitle: 'Grand Canyon',
    imageUrl: 'https://cdn.21st.dev/assets/mirror/11/1127d9ddb36716d0f7406f792ab484510ac712219d535e18a099d3381233cff4.jpg',
  },
  {
    id: 2,
    title: 'Highest Mountain',
    subtitle: 'Yosemite',
    imageUrl: 'https://cdn.21st.dev/assets/mirror/44/4466346f6258e5ebe8e2e96e074c58fe8bbcdeeb24765fdecec6e2fb2d7dc8e5.jpg',
  },
  {
    id: 3,
    title: 'Deep Desert',
    subtitle: 'Sahara',
    imageUrl: 'https://cdn.21st.dev/assets/mirror/51/51cdd8d3464631792370abe5c107a2645a0fd067450c67b27f1d26e510dd8956.jpg',
  },
  {
    id: 4,
    title: 'Breath-taking',
    subtitle: 'Landscape',
    imageUrl: 'https://cdn.21st.dev/assets/mirror/20/20f995189be15b38c7652b025aa3159ebdc7bfd284ed49303dc2b6e7dac489dd.jpg',
  },
];

/**
 * A demo page to showcase the HoverRevealCards component.
 */
const HoverRevealCardsDemo = () => {
  return (
    // Centering the component for a clean preview.
    // `bg-background` ensures it adapts to the current theme (light/dark).
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <HoverRevealCards items={demoItems} />
    </div>
  );
};

export default HoverRevealCardsDemo;