Flip card

Pro

A card with two faces, turned over by a button: a summary on the front and its detail on the back, a question and its answer. Only the face shown is in the page for the keyboard and screen readers: the other is inert and hidden from assistive technology, as it is from sight. The button ("Show back", "Show front") sits under the faces and doesn't turn with them, so focus stays on it; its name ends with what the card is ("Show back, Pricing"). When the app sets flipped while focus is inside the face turning away, focus moves to the button. The card is as tall as its taller face.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0, 4.2.0 and 4.3.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/flip-card

Brings in: bidi, button, locale, motion, tokens, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import { FlipCard } from "@/components/candor/ui/flip-card"

export default function Example() {
  return (
    <FlipCard
      label="Team plan"
      className="max-w-xs"
      front={
        <div className="flex flex-col gap-1">
          <p className="text-sm text-muted-foreground">Team plan</p>
          <p className="text-2xl font-semibold">$24 a seat</p>
          <p className="text-sm text-muted-foreground">Billed monthly</p>
        </div>
      }
      back={
        <ul className="flex list-disc flex-col gap-1 ps-4 text-sm">
          <li>Up to 50 seats</li>
          <li>Shared agent runs and approvals</li>
          <li>Audit log kept for a year</li>
        </ul>
      }
    />
  )
}

<FlipCard>

Prop	Type	Default	Description
frontrequired	`React.ReactNode`	—	The face shown first.
backrequired	`React.ReactNode`	—	The face the button turns to.
flipped	`boolean \| undefined`	—	Whether the back is shown, when you control it.
defaultFlipped	`boolean \| undefined`	false	Whether the back is shown at first, when you don't control it. Defaults to false.
onFlippedChange	`((flipped: boolean) => void) \| undefined`	—	Called with the face the person turned to: true for the back.
labelrequired	`string`	—	What the card is, said after the button's words: "Pricing" reads "Show back, Pricing".
className	`string \| undefined`	—	Classes for the root, merged with Candor's.

Strings

The fixed words, in English by default. Change any of them under flipCard in <LocaleProvider strings={{ … }}>; the table is exported as flipCardStrings.

Key	English
showBack	Show back
showFront	Show front
name	{action}, {label}

Motion

Moment	Family	What it does
turn	move	When the person presses the card's button (or the app sets `flipped`), the card turns over about its upright axis to the other face. Under reduced motion or the calm level the faces swap at once, and a card drawn on either face is drawn still.

Set with --cd-motion-flip-card-<moment>-* in your brand file; the families are in the design reference.