Skip to content
Pinky UI

Flip Card

A 3D flip revealing a back face — hover-driven with hover, tap-driven on touch.

  • cards
  • depth
  • card
  • effect
  • 3d
  • flip
  • hover
Score

94

Up 12% from last quarter.

Quick usage

usage
import { FlipCard } from "@pinky-ui/components";

<FlipCard front={<StatCard label="Score" value="94" />} back={<p>Up 12% from last quarter.</p>} />

Presets

Default

Square faces, hover to flip.

Install

Add @pinky-ui/components as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/components

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
frontReactNode—Required.
backReactNode—Required.
aspect"video" | "square" | "portrait""square"Shared aspect ratio for both faces, so flipping never changes the card's height.
radius"md" | "lg" | "xl" | "2xl""xl"Corner radius from the shape scale.
paddedbooleantrueInner content padding, both faces.
shadow"neutral" | "pink""neutral"Shadow token pair.

Accessibility

  • Hover-driven only on a confirmed hover-capable pointer (usePointerCapability) — on touch it's a real button (role="button", focusable, Enter/Space and tap both flip it), never a hover-only effect a touch user can't reach.
  • aria-pressed on the touch/keyboard path reflects the current face.

Reduced motion

The flip tween drops to an instant swap under prefers-reduced-motion: reduce; the state change itself still happens.

When to use

  • A compact stat with one piece of supporting detail on the back
  • A quiz or flashcard-style reveal

When not to use

  • Content someone needs to compare side by side — a flip hides the front face entirely, it can't show both at once