Logo

Aura UI

Flip Card

Interactive card component with 3D flip animations and multiple trigger options.

Flip Cards add dramatic 3D flip effects to your content! With support for hover and click triggers, auto-flip functionality, and smooth perspective animations, these cards create engaging interactive experiences that reveal different content on each side.

Preview
Code

Basic Flip Cards

🎯

Front Side

Hover to flip!

✨

Back Side

Amazing flip effect!

🚀

Project

Click to reveal

💻

Details

More information here

🎨

Design

Auto flip demo

🎭

Creative

Auto-flipping card

Vertical Flip Direction

⬆️

Top Side

Vertical flip!

⬇️

Bottom Side

Flipped vertically

Complex Content

👤

User Profile

John Doe

Software Developer

Contact Info

📧 john@example.com

📱 +1 (555) 123-4567

🏢 Tech Company Inc.

📊

Analytics

Users1,234

Detailed Stats

1,234

Total Users

89%

Active Rate

45

New Today

12

Countries

Interactive Demo

Try different interaction methods:

Hover Me!
🎉 Flipped!
Click Me!
👆 Clicked!
Auto Flip
⏰ Auto!

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add flip-card
yarn @rajdevxd/aura-ui add flip-card
pnpm dlx @rajdevxd/aura-ui add flip-card
bunx --bun @rajdevxd/aura-ui add flip-card

Usage

import { FlipCard } from "@/components/ui/flip-card"

export function Example() {
  return (
    <FlipCard
      frontContent={
        <div className="p-6 text-center">
          <h3>Front Side</h3>
          <p>Hover to flip!</p>
        </div>
      }
      backContent={
        <div className="p-6 text-center">
          <h3>Back Side</h3>
          <p>Flipped content!</p>
        </div>
      }
    />
  )
}

Props

PropTypeRequiredDescription
frontContentReact.ReactNodeYesContent for the front side of the card
backContentReact.ReactNodeNoContent for the back side of the card
flipDirection"horizontal" | "vertical"NoDirection of the flip animation (default: "horizontal")
flipOnHoverbooleanNoEnable flip on hover (default: true)
flipOnClickbooleanNoEnable flip on click (default: false)
autoFlipbooleanNoEnable automatic flipping (default: false)
autoFlipDelaynumberNoDelay between auto-flips in milliseconds (default: 3000)

Flip Directions

Horizontal Flip

Cards flip left to right (default behavior).

<FlipCard
  flipDirection="horizontal"
  frontContent={<div>Front</div>}
  backContent={<div>Back</div>}
/>

Vertical Flip

Cards flip top to bottom.

<FlipCard
  flipDirection="vertical"
  frontContent={<div>Front</div>}
  backContent={<div>Back</div>}
/>

Trigger Options

Hover Trigger (Default)

Cards flip when you hover over them.

<FlipCard
  flipOnHover={true}
  frontContent={<div>Hover me!</div>}
  backContent={<div>Flipped!</div>}
/>

Click Trigger

Cards flip when you click them.

<FlipCard
  flipOnClick={true}
  flipOnHover={false}
  frontContent={<div>Click me!</div>}
  backContent={<div>Flipped!</div>}
/>

Auto Flip

Cards automatically flip at regular intervals.

<FlipCard
  autoFlip={true}
  autoFlipDelay={2000}
  frontContent={<div>Auto flip!</div>}
  backContent={<div>Flipped automatically!</div>}
/>

Features

  • 3D Flip Effects: Smooth perspective transforms with depth
  • Multiple Triggers: Hover, click, and auto-flip options
  • Directional Control: Horizontal and vertical flip directions
  • Particle Effects: Animated particles on interaction
  • Customizable Timing: Adjustable auto-flip delays
  • Smooth Animations: Hardware-accelerated CSS transforms
  • Responsive Design: Works on all screen sizes

Advanced Usage

Profile Cards

<FlipCard
  frontContent={
    <div className="text-center p-6">
      <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full mx-auto mb-4 flex items-center justify-center">
        <span className="text-2xl text-white">👤</span>
      </div>
      <h3 className="font-semibold mb-2">John Doe</h3>
      <p className="text-sm text-muted-foreground">Software Developer</p>
    </div>
  }
  backContent={
    <div className="text-center p-6">
      <h3 className="font-semibold mb-4">Contact Info</h3>
      <div className="space-y-2 text-sm">
        <p>📧 john@example.com</p>
        <p>📱 +1 (555) 123-4567</p>
        <p>🏢 Tech Company Inc.</p>
      </div>
      <button className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors">
        View Profile
      </button>
    </div>
  }
/>

Product Showcase

<FlipCard
  frontContent={
    <div className="text-center p-6">
      <div className="text-6xl mb-4">🎧</div>
      <h3 className="font-semibold mb-2">Wireless Headphones</h3>
      <p className="text-sm text-muted-foreground">$299.99</p>
    </div>
  }
  backContent={
    <div className="text-center p-6">
      <h3 className="font-semibold mb-4">Features</h3>
      <ul className="text-sm space-y-1 mb-4">
        <li>✓ 30-hour battery life</li>
        <li>✓ Noise cancellation</li>
        <li>✓ Premium sound quality</li>
        <li>✓ Comfortable fit</li>
      </ul>
      <button className="px-6 py-2 bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors">
        Add to Cart
      </button>
    </div>
  }
  autoFlip={true}
  autoFlipDelay={4000}
/>

Interactive Grid

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
  <FlipCard
    flipOnClick={true}
    frontContent={<div className="p-6 text-center font-semibold">Service 1</div>}
    backContent={<div className="p-6 text-center">Details about service 1</div>}
  />

  <FlipCard
    flipOnClick={true}
    frontContent={<div className="p-6 text-center font-semibold">Service 2</div>}
    backContent={<div className="p-6 text-center">Details about service 2</div>}
  />

  <FlipCard
    flipOnClick={true}
    frontContent={<div className="p-6 text-center font-semibold">Service 3</div>}
    backContent={<div className="p-6 text-center">Details about service 3</div>}
  />
</div>

Performance

  • GPU Accelerated: Uses transform-gpu for smooth animations
  • Optimized Rendering: Minimal re-renders during animations
  • Hardware Acceleration: CSS 3D transforms for 60fps performance
  • Memory Efficient: Lightweight animation system

Browser Support

  • Modern Browsers: Full support for Chrome, Firefox, Safari, Edge
  • CSS Transforms: Requires CSS 3D transform support
  • Fallback: Graceful degradation to static content

Accessibility

  • Keyboard Navigation: Full keyboard accessibility
  • Screen Reader Support: Proper ARIA labels and descriptions
  • Focus Management: Clear focus indicators
  • Reduced Motion: Respects user's motion preferences

Flip Cards - adding dramatic 3D reveals to your user interface! 🎭✨

Particle Background

Animated particle background component with customizable physics and visual effects.

Rotating Card

3D cube component with multiple faces that rotate based on mouse movement or auto-rotation.

On this page

InstallationUsagePropsFlip DirectionsHorizontal FlipVertical FlipTrigger OptionsHover Trigger (Default)Click TriggerAuto FlipFeaturesAdvanced UsageProfile CardsProduct ShowcaseInteractive GridPerformanceBrowser SupportAccessibility