✨ Give us a star on GitHub Help us grow by starring the project and sharing your feedback.

Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Card Flip Hover

A 3D card flip animation component that triggers on hover

Front

Back

import { CardFlipHover } from "@/registry/eldoraui/card-flip-hover"

export function DemoOne() {
  return (
    <div className="flex items-center justify-center">
      <CardFlipHover imageUrl="https://res.cloudinary.com/eldoraui/image/upload/v1734021310/advanced-gradient_un8eg6.jpg" />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/card-flip-hover

Usage

import { CardFlipHover } from "@/components/eldoraui/card-flip-hover"

<CardFlipHover imageUrl="https://example.com/image.jpg" />

Props

Prop	Type	Default	Description
`imageUrl`	`string`	`-`	URL of the image to display on both sides of the card

Browser Clerk OTP

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Trusted by 1,000+ developers