║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Vercel Card description: A smooth interactive vercel inspired card.

<ComponentPreview name="vercelcard-demo" className="" description="" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="vercel-card" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>vercel-card.tsx</code> </p> <ComponentSource name="vercel-card" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

Usage

import { VercelCard } from "@/components/ui/vercelcard";

<VercelCard className="w-full max-w-sm h-64 flex items-center justify-center" animateOnHover glowEffect>
        <div className="text-center px-6">
          <h1 className="text-2xl font-semibold text-black dark:text-white mb-3">
            Vercel Inspired Card
          </h1>
          <p className="text-gray-700 dark:text-gray-300">
            A smooth interactive card built with <b>Framer Motion</b> and{" "}
            <b>Tailwind CSS</b>.
          </p>
        </div>
      </VercelCard>

API Reference

Vercel Card

A smooth interactive vercel inspired card.

Props

<PropsTable rows={[ { prop: "children", type: "ReactNode", default: "required", description: "Content of the card. Placed inside the centered area of the card." }, { prop: "showIcons", type: "boolean", default: "true", description: "Whether to display the corner icons (+) around the card." }, { prop: "iconClassName", type: "string", default: "''", description: "Additional classes to style the corner icons." }, { prop: "animateOnHover", type: "boolean", default: "false", description: "Whether the card should scale slightly on hover." }, { prop: "glowEffect", type: "boolean", default: "false", description: "Whether to show a glowing gradient effect on hover." }, { prop: "bordered", type: "boolean", default: "true", description: "Whether to show the card border." }, { prop: "className", type: "string", default: "''", description: "Custom classes applied to the card container." }, { prop: "...props", type: "HTMLMotionProps<'div'>", default: "-", description: "Any other props supported by Framer Motion's div, e.g., id, style, onClick." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║