Loading…

Flip Card

beta

A two-faced card that turns over in 3D: it leans toward the pointer, lifts as it turns, and a sheen sweeps across the faces.

Display
1 file
2 npm packages
Accessibility notes
Animates with motion

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add flip-card

npm packages installed: class-variance-authority, motion.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Hover
Vertical Axis
Controlled

API

Generated from the component's own types, so a prop cannot appear here without existing.

<FlipCard>

Prop	Type	Default
`back` (required) The face shown once turned over.	`ReactNode`	—
`front` (required) The face shown at rest.	`ReactNode`	—
`axis` `y` turns like a page (left–right), `x` like a calendar (top–bottom).	`"x" \| "y"`	`"y"`
`backClassName` Classes for the back face.	`string`	—
`defaultFlipped` Uncontrolled initial state.	`boolean`	`false`
`disabled` Freezes the card on its current face.	`boolean`	`false`
`flipLabel` The flip button's accessible name. It is a toggle, so the name stays the same when pressed.	`string`	`"Show back"`
`flipped` Controlled: whether the back is showing.	`boolean`	—
`frontClassName` Classes for the front face.	`string`	—
`hideButton` Hide the corner button. Only sensible with `trigger="hover"` and another way to toggle `flipped`.	`boolean`	`false`
`lean` The largest lean toward the pointer, in degrees. 0 keeps the card flat.	`number`	`6`
`onFlippedChange`	`(flipped: boolean) => void`	—
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`trigger` `click` turns the card only with its corner button. `hover` also turns it while a mouse rests on it; the button stays for keyboard and touch.	`"click" \| "hover"`	`"click"`

Plus every attribute of <div> except children.

Accessibility

Turning over is a toggle button in the card's corner, named "Show back" and exposed with aria-pressed; the name stays the same in both states, as a toggle's should. The button sits outside the rotating faces, so it is always reachable and never turns away. The face turned away is inert and aria-hidden, so its links and buttons cannot be reached by Tab or a screen reader. trigger="hover" also turns the card while a mouse rests on it, but the button stays for keyboard and touch. The shadow and sheen are aria-hidden decoration. Springs run through motion inside MotionConfig reducedMotion="user"; under reduced motion the card neither leans nor lifts and turning over is an instant swap. Nothing moves on first paint.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

back

The face shown once turned over.

ReactNode

—

front

The face shown at rest.

ReactNode

—

axis

y turns like a page (left–right), x like a calendar (top–bottom).

"x" | "y"

"y"

backClassName

Classes for the back face.

string

—

defaultFlipped

Uncontrolled initial state.

boolean

false

disabled

Freezes the card on its current face.

boolean

false

flipLabel

The flip button's accessible name. It is a toggle, so the name stays the same when pressed.

string

"Show back"

flipped

Controlled: whether the back is showing.

boolean

—

frontClassName

Classes for the front face.

string

—

hideButton

Hide the corner button. Only sensible with trigger="hover" and another way to toggle flipped.

boolean

false

lean

The largest lean toward the pointer, in degrees. 0 keeps the card flat.

number

6

onFlippedChange

(flipped: boolean) => void

—

size

"sm" | "md" | "lg"

"md"

trigger

click turns the card only with its corner button. hover also turns it while a mouse rests on it; the button stays for keyboard and touch.

"click" | "hover"

"click"