Interactive Cards

Cards with hover effects and animations

Default Card

Basic styled card with scale animation.

Hover Lift

Lifts and changes color on hover.

Gradient Tilt

Beautiful gradient and subtle tilt.

Glass

Frosted glass effect.

Custom Border

Dashed outline using utility overrides.

Static Card

No animation but still responds to hover with color.

Interactive Cards

Beautiful, interactive cards with smooth hover animations and modern design patterns. Perfect for displaying content, products, or information in an engaging way.

Features

Hover Animations: Smooth scaling and shadow effects
Gradient Backgrounds: Beautiful color transitions
Interactive Elements: Clickable areas with feedback
Responsive Design: Adapts to all screen sizes
Accessible: Proper focus states and keyboard navigation

Installation

npm install motion/react lucide-react

Basic Usage

import { Card } from "@/components/ui/card";

function MyComponent() {
  return (
    <Card className="p-6">
      <h3>Card Title</h3>
      <p>Card content goes here...</p>
    </Card>
  );
}

Variants

Default Card

A simple card with subtle hover effects.

<Card className="p-6">
  <h3>Default Card</h3>
  <p>This is a basic card component.</p>
</Card>

Interactive Card

A card with enhanced hover animations.

<Card className="cursor-pointer p-6 transition-all hover:shadow-lg">
  <h3>Interactive Card</h3>
  <p>This card responds to hover and click events.</p>
</Card>

Gradient Card

A card with beautiful gradient backgrounds.

<Card className="bg-gradient-to-br from-blue-500 to-purple-600 p-6 text-white">
  <h3>Gradient Card</h3>
  <p>This card has a beautiful gradient background.</p>
</Card>

Glass Card

A card with a frosted glass effect.

<Card className="border-white/20 bg-black/10 text-black backdrop-blur-md dark:bg-white/20 dark:text-white">
  <h3>Glass Card</h3>
  <p>This card has a frosted glass effect.</p>
</Card>

Custom Border Card

A card with a custom border.

<Card className="border-2 border-dashed border-primary/40">
  <h3>Custom Border Card</h3>
  <p>This card has a custom border.</p>
</Card>

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes
variant	0	-	Card variant
animation	0	-	Card animation
children	ReactNode	-	Card content

Customization

Custom Animations

<Card className="p-6" animation="scale" variant="gradient">
  <h3>Animated Card</h3>
  <p>This card has custom animations.</p>
</Card>

Custom Styling

<Card className="border-0 bg-gradient-to-r from-pink-500 to-yellow-500 p-6 text-white">
  <h3>Custom Styled Card</h3>
  <p>This card has custom colors and styling.</p>
</Card>

Examples

Product Card

<Card className="overflow-hidden">
  <img
    src="/product-image.jpg"
    alt="Product"
    className="h-48 w-full object-cover"
  />
  <div className="p-6">
    <h3 className="text-xl font-bold">Product Name</h3>
    <p className="mt-2 text-neutral-600">Product description...</p>
    <div className="mt-4 flex items-center justify-between">
      <span className="text-2xl font-bold">$99.99</span>
      <Button>Add to Cart</Button>
    </div>
  </div>
</Card>

Profile Card

<Card className="p-6 text-center">
  <img
    src="/avatar.jpg"
    alt="Profile"
    className="mx-auto mb-4 h-24 w-24 rounded-full"
  />
  <h3 className="text-xl font-bold">John Doe</h3>
  <p className="text-neutral-600">Software Developer</p>
  <div className="mt-4 flex justify-center gap-2">
    <Button variant="outline" size="sm">
      Follow
    </Button>
    <Button size="sm">Message</Button>
  </div>
</Card>

Feature Card

<Card className="p-6 text-center">
  <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500">
    <Star className="h-6 w-6 text-white" />
  </div>
  <h3 className="mb-2 text-lg font-bold">Feature Title</h3>
  <p className="text-neutral-600">Feature description goes here...</p>
</Card>

Best Practices

Consistent Spacing: Use consistent padding and margins
Clear Hierarchy: Use proper heading levels and typography
Accessible Content: Ensure sufficient color contrast
Mobile First: Design for mobile devices first
Performance: Optimize images and animations

Accessibility

Focus States: Clear focus indicators for keyboard navigation
ARIA Labels: Proper labels for screen readers
Color Contrast: Sufficient contrast ratios
Semantic HTML: Use proper HTML structure

Troubleshooting

Card not animating?

Check if Framer Motion is properly installed and imported.

Styling issues?

Verify that Tailwind CSS is configured correctly and classes are not being purged.

Performance problems?

Consider reducing animation complexity or using will-change CSS property for better performance.

PreviousButtons

NextFloating Action Button