Squishy card

Pricing 40

About

here is dynamic card

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

Code

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

Usage.tsx

"use client";

import { useState, useEffect } from "react";
import { SquishyCard } from "@/components/ui/squishy-card";
import { FiSun, FiMoon } from "react-icons/fi";

const DemoSquishyCard = () => {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem("theme") === "dark";
    }
    return false;
  });

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [isDarkMode]);

  const toggleTheme = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };

  return (
    <div className="flex h-screen w-full justify-center items-center bg-white dark:bg-black relative">
      <SquishyCard />

      <button
        onClick={toggleTheme}
        className="absolute top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-black dark:text-white transition-colors duration-200"
        aria-label="Toggle theme"
      >
        {isDarkMode ? <FiSun size={24} /> : <FiMoon size={24} />}
      </button>
    </div>
  );
};

export { DemoSquishyCard };