Docs
Subscribe Card
When the cursor hovers over the card then the card skews and when hovers over the button the check mark appears.
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/feature-cards/subscribe-card.jsonManual
Install dependencies
npm install lucide-reactRun the following command
It will create a new file subscribe-card.tsx inside the components/animata/card directory.
mkdir -p components/animata/card && touch components/animata/card/subscribe-card.tsxPaste the code
Open the newly created file and paste the following code:
import { Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
interface SubscribeCardProps {
title?: string;
placeholder?: string;
buttonText?: string;
}
export default function SubscribeCard({
title = "Want to read the rest?",
placeholder = "justin@buttondown.email",
buttonText = "Subscribe for $5/mo",
}: SubscribeCardProps) {
return (
<div className="mx-auto flex w-full max-w-lg -skew-x-3 skew-y-2 flex-col gap-2 rounded-lg bg-white py-6 transition-transform duration-300 hover:skew-x-0 hover:skew-y-0">
<h3 className="px-8 font-sans font-bold text-black">{title}</h3>
<div className="flex flex-col gap-2 px-4">
<Input placeholder={placeholder} className="rounded-none bg-gray-100" />
<Button
className="group/subscribe relative cursor-pointer bg-gray-500 text-white transition duration-300 hover:bg-green-600"
aria-label={buttonText}
>
<Check className="absolute left-3 opacity-0 transition-opacity duration-300 group-hover/subscribe:opacity-100" />
<p className="pl-4 hover:font-bold">{buttonText}</p>
</Button>
</div>
</div>
);
}Credits
Built by Prithwi Hegde