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

Property	Type	Default	Description
`children`	ReactNode	`required`	Content of the card. Placed inside the centered area of the card.
`showIcons`	boolean	`true`	Whether to display the corner icons (+) around the card.
`iconClassName`	string	`''`	Additional classes to style the corner icons.
`animateOnHover`	boolean	`false`	Whether the card should scale slightly on hover.
`glowEffect`	boolean	`false`	Whether to show a glowing gradient effect on hover.
`bordered`	boolean	`true`	Whether to show the card border.
`className`	string	`''`	Custom classes applied to the card container.
`...props`	HTMLMotionProps<'div'>	`-`	Any other props supported by Framer Motion's div, e.g., id, style, onClick.