Flip Box React component
A photo card that turns over in 3D to show its details, flipping away from whichever edge the pointer came in from, with a priced feature list and call to action on the back, tap and keyboard support and a reduced-motion fallback.
About the Flip Box component
Flip Box is a photo card with a second side. The front sells the idea with a picture and a title; turning it over shows what someone actually needs to decide: what's included, what it costs and a button to act on it.
With the default axis it flips away from whichever edge the pointer came in from, so moving in from the left turns it one way and coming down from the top tips it the other. On touch screens a tap turns it over, and keyboard users can flip it with Enter and land straight on the back.
When to use it
Use it for service or package cards, team members with a short bio on the back, product teasers, or anywhere a picture should come first and the details second.
Keep anything people must see without interacting on the front; the back is a reveal, not the only place for critical information.
Installation
Add the Flip Box component to your project with the shadcn CLI. It lands in components/flip-box.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/flip-boxOr copy the source by hand and install its dependencies:
npm install lucide-react clsx tailwind-mergeProps
<FlipBox /> accepts 24 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| image | string | "/demo/38.webp" |
| imageAlt | string | "" |
| eyebrow | string | "01 — Portraits" |
| title | string | "Studio portraits" |
| caption | string | "Natural light, a quiet room, an hour." |
| backTitle | string | "The portrait session" |
| backDescription | string | "A relaxed hour in our daylight studio, shot slowly so nobody has to perform for the came… |
| features | string[] | ["60-minute session", "15 retouched images", "Delivered in 5 days"] |
| price | string | "€320" |
| priceNote | string | "per session" |
| ctaLabel | string | "Book a session" |
| ctaHref | string | "#" |
- imagestringDefault: "/demo/38.webp"
- imageAltstringDefault: ""
- eyebrowstringDefault: "01 — Portraits"
- titlestringDefault: "Studio portraits"
- captionstringDefault: "Natural light, a quiet room, an hour."
- backTitlestringDefault: "The portrait session"
- backDescriptionstringDefault: "A relaxed hour in our daylight studio, shot slowly so nobody has to perform for the came…
- featuresstring[]Default: ["60-minute session", "15 retouched images", "Delivered in 5 days"]
- pricestringDefault: "€320"
- priceNotestringDefault: "per session"
- ctaLabelstringDefault: "Book a session"
- ctaHrefstringDefault: "#"
Show all 24 propsShow fewer
| onCtaClick | React.MouseEventHandler<HTMLAnchorElement> | — |
| front Replace the whole front or back face with your own content. | React.ReactNode | — |
| back | React.ReactNode | — |
| trigger | "hover" | "click" | "hover" |
| axis | "auto" | "x" | "y" | "auto" |
| duration Flip duration in ms. | number | 700 |
| aspectRatio Width / height of the card. | number | 3 / 4 |
| radius | number | 18 |
| theme | "dark" | "light" | "dark" |
| flipped Controlled flip state. | boolean | — |
| defaultFlipped | boolean | false |
| onFlippedChange | (flipped: boolean) => void | — |
- onCtaClickReact.MouseEventHandler<HTMLAnchorElement>
- front
Replace the whole front or back face with your own content.
React.ReactNode - backReact.ReactNode
- trigger"hover" | "click"Default: "hover"
- axis"auto" | "x" | "y"Default: "auto"
- duration
Flip duration in ms.
numberDefault: 700 - aspectRatio
Width / height of the card.
numberDefault: 3 / 4 - radiusnumberDefault: 18
- theme"dark" | "light"Default: "dark"
- flipped
Controlled flip state.
boolean - defaultFlippedbooleanDefault: false
- onFlippedChange(flipped: boolean) => void
npm dependencies
Installed for you by the shadcn CLI.
Flip Box FAQ
- Can it flip on click instead of hover?
- Yes, set trigger="click". On touch screens a tap always flips it, whatever the trigger.
- How does the direction work?
- With axis="auto" the card turns away from the edge the pointer entered through: left and right turn it around the vertical axis, top and bottom around the horizontal one. Set axis="x" or "y" to always use one axis.
- Can I put my own content on each side?
- Pass front and back to replace either face completely. The flip mechanics, keyboard handling and the Flip button stay the same.
- Can I control it from outside?
- Pass flipped and onFlippedChange to control it, or defaultFlipped to start on the back.
