Vercel Card

A smooth interactive vercel inspired card.

Vercel Inspired Card

A smooth interactive card built with Framer Motion and Tailwind CSS.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/vercel-card.json 

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

PropertyTypeDefaultDescription
childrenReactNoderequired
Content of the card. Placed inside the centered area of the card.
showIconsbooleantrue
Whether to display the corner icons (+) around the card.
iconClassNamestring''
Additional classes to style the corner icons.
animateOnHoverbooleanfalse
Whether the card should scale slightly on hover.
glowEffectbooleanfalse
Whether to show a glowing gradient effect on hover.
borderedbooleantrue
Whether to show the card border.
classNamestring''
Custom classes applied to the card container.
...propsHTMLMotionProps<'div'>-
Any other props supported by Framer Motion's div, e.g., id, style, onClick.

Built withby Ahdeetai.