1 variant

Flip Card

A card that flips between a front and back face on hover or click.

Footwear

Aria Runner

$128 · Click for details

Footwear

Aria Runner

Lightweight knit upper, responsive foam midsole, and a recycled rubber outsole — built for daily miles.

$128Add to cart

usage.tsx

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

export function ProductCard() {
  return (
    <FlipCard
      trigger="click"
      front={<img src="/aria-runner.jpg" alt="Aria Runner" />}
      back={<ProductDetails price={128} description="..." />}
    />
  );
}

"use client";

import { type KeyboardEvent, type ReactNode, useEffect, useState } from "react";
import { cn } from "@/lib/utils";

export interface FlipCardProps {
  /** Content shown on the front face. */
  front: ReactNode;
  /** Content shown on the back face, once flipped. */
  back: ReactNode;
  /** Flip on hover, or on click/tap. Default "hover". */
  trigger?: "hover" | "click";

69 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/flip-card

Props

frontRequiredReactNode

The face shown at rest.

backRequiredReactNode

The face shown once flipped.

trigger"hover" | "click"Default "hover"

Hover becomes tap on a device with no pointer, so the back face is never unreachable.

classNamestring

Merged last, so anything passed here wins over the component's own classes.