Card

Cards 48

About

PromoCard An advanced, self-contained promotional card designed to be visually engaging and build user trust. It features an embedded animated dot-pattern background for texture, a sequential loading indicator, and smooth framer-motion transitions, all without requiring external CSS modifications.

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

Code

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

Usage.tsx

import { useState } from "react";
import { AnimatePresence } from "framer-motion";

import { PromoCard } from "@/components/ui/card-9";
import { Button } from "@/components/ui/button";

export default function PromoCardDemo() {
  const [isCardVisible, setIsCardVisible] = useState(true);

  // Handlers for the card actions
  const handleGetStarted = () => {
    alert("Get Started button clicked!");
    setIsCardVisible(false);
  };

  const handleClose = () => {
    setIsCardVisible(false);
  };

  const handleShowCard = () => {
    setIsCardVisible(true);
  };

  return (
    <div className="flex min-h-[450px] w-full flex-col items-center justify-center gap-4 bg-background p-4">
      <AnimatePresence>
        {isCardVisible && (
          <PromoCard
            label="Join VeloMark Pro!"
            title={<>Ready to boost <br /> your performance?</>}
            buttonText="Get Started"
            onButtonClick={handleGetStarted}
            onClose={handleClose}
          />
        )}
      </AnimatePresence>

      {!isCardVisible && (
        <Button onClick={handleShowCard}>Show Promo Card</Button>
      )}
    </div>
  );
}