1 variant

Flip Card

Name: easeUI Pro
Price: 99.00 USD

A React flip card that turns between a front and a back face on hover or tap, with a spring you can tune.

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";

64 more lines ship with an easeUI Pro license.

Buy a license

Install

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