Vercel Card

A smooth interactive vercel inspired card.

Installation

npx shadcn@latest add @scrollxui/vercel-card

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.