Flip Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import FlipCard from "./FlipCard";

export default function Example() {
  return (
    <FlipCard
      front={"A different perspective."}
      back={"There is more to the story."}
      frontBackground={"radial-gradient(ellipse at 100% 0%, #f2b394, transparent 60%), #d8cfe5"}
      backBackground={"radial-gradient(ellipse at 0% 100%, #695777, transparent 70%), #27202e"}
      frontColor={"#302336"}
      backColor={"#f5eefa"}
      frontLabel={"Turn it over"}
      backLabel={"Back to the front"}
      minHeight={320}
      borderRadius={22}
      style={{
        "fontSize": "clamp(1.8rem, 3vw, 2.8rem)",
        "fontWeight": 500,
        "letterSpacing": "-.04em",
        "lineHeight": 1.1
      }}
    />
  );
}

Using Flip Card

Provide front and back content separately, with labels that explain each face. minHeight should accommodate the taller face.

Use flipped and onFlip when a parent controls the card, or defaultFlipped to choose its initial face. Avoid placing essential instructions only on the hidden side.

Props

Name	Type	Required	Default	Description
front	ReactNode	No	undefined	Content for the front face.
back	ReactNode	No	undefined	Content for the reverse face.
flipped	boolean	No	undefined	Optional controlled state. Omit to let the component manage its own state.
defaultFlipped	boolean	No	false	Initial state when uncontrolled.
onFlip	function	No	undefined	Called with the next boolean state when the toggle is pressed.
frontBackground	string	No	"#dfd8ec"	CSS background for the front face.
backBackground	string	No	"#373044"	CSS background for the back face.
frontColor	string	No	"#292133"	Front face text colour.
backColor	string	No	"#f4ecff"	Back face text colour.
frontLabel	string	No	"Flip card"	Accessible and visible label for the flip control on the front.
backLabel	string	No	"Go back"	Accessible and visible label for the return control.
minHeight	number \| string	No	300	Minimum height in pixels or a CSS length. The component can fill a taller parent.
borderRadius	number	No	22	Corner radius in pixels.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.