Pixel Card

Cards 32

About

a futuristic minimalistic animated Pixel Card

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

Code

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

Usage.tsx

import React, { useState, useEffect } from 'react';
import { PixelCard } from "@/components/ui/pixel-card";

const PixelCardDemo = () => {
  const [isDark, setIsDark] = useState(true);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDark]);

  const toggleTheme = () => {
    setIsDark(!isDark);
  };

  return (
    <div className="flex w-full min-h-screen flex-col justify-center items-center p-4 transition-colors duration-300 bg-black dark:bg-white">
      <div className="absolute top-4 right-4">
        <button
          onClick={toggleTheme}
          className="p-2 rounded-full border border-gray-700 dark:border-gray-300 bg-gray-900 dark:bg-gray-100 text-white dark:text-black"
        >

        </button>
      </div>

      <PixelCard variant="default">
        <div className="absolute inset-0 flex flex-col justify-center items-center text-center p-4">
          <h2 className="text-2xl font-bold mb-2">hover me.</h2>
          <button className="mt-4 px-4 py-2 rounded-md transition-colors"
                  style={{ 
                    backgroundColor: 'var(--pixel-active-color)',
                    color: 'var(--card-bg)'
                  }}>
            Click Me
          </button>
        </div>
      </PixelCard>
    </div>
  );
};

export { PixelCardDemo };