caliper uidocs
DemoSign inGet Pro

Flip card

Pro

A card that turns over to reveal the back.

Installs components/ui/flip-card.tsxDepends on lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/flip-card

Team

$24 / seat / month

For teams that ship together. Flip for the details.

Question 3 of 12

Which state should a focus ring show on a disabled control?

When to use #

Use it for

  • Showing a short answer or detail on demand.

Skip it when

  • The back has long content.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/flip-card

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { FlipCard } from "@/components/ui/flip-card"

The worked example comes with Pro

The 51-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

FlipCard

component
PropTypeDefault
front *ReactNode—
back *ReactNode—
flippedboolean—
defaultFlippedbooleanfalse
onFlippedChange((flipped: boolean) => void)—
frontLabelstring"Show details"
backLabelstring"Show front"
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden and aria-label in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.