Premium & Brand

Flip Card

A 3D card that flips between a front and a back face.

Import

tsx

import { FlipCard, FlipCardFront, FlipCardBack } from "@cronus-ui/ui";

bash

npx cronus-ui add flip-card

Examples

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component FlipCardDefault layout:inline style:flip-card {
  aria-label:"Plan"
  label "Plan"
  text "Front"
  text "Back"
}

page "/audit/flip-card/default" type:custom {
  use FlipCardDefault
}

API Reference

Generated from the component's exported types.

FlipCardProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
`trigger`	`FlipCardTrigger`	`"hover"`	What flips the card. `"hover"` flips on pointer hover and keyboard focus (so it is fully operable without a mouse); `"click"` toggles on click, Enter or Space and exposes `role="button"` + `aria-pressed`; `"controlled"` never self-flips — you drive it entirely through the prop.
`axis`	`FlipCardAxis`	`"horizontal"`	Axis the card rotates around. `"horizontal"` spins left↔right (`rotateY`); `"vertical"` tumbles top↔bottom (`rotateX`).
`flipped`	`boolean`	—	Controlled flip state. When provided the card shows the back face iff `true` and its own hover/click toggling is suppressed (parent owns the state).
`defaultFlipped`	`boolean`	`false`	Initial flip state when uncontrolled.
`onFlippedChange`	`(flipped: boolean) => void`	—	Fires with the next flip state whenever the card would flip. Still called while controlled, so you can lift the state up.
`aria-label`	`string`	—	Accessible name for the flip control. Strongly recommended for `trigger="click"`, where the whole card is a single button.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

FlipCardFrontProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

FlipCardBackProps