Flip Card

A toggle button with click, or turns while hovered or focused. For flashcards, pricing details and bios.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add flip-card

Example

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

<FlipCard front={<p>Q</p>} back={<p>A</p>} className="h-48 w-72" />

Installs to components/galactrex/flip-card.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`front / back`	`ReactNode`	—	Faces.
`trigger`	`"click" \| "hover"`	`"click"`	What flips it.
`axis`	`"y" \| "x"`	`"y"`	Turn axis.
`label`	`string`	—	Flip action name.
`className`	`string`	—	Extra classes for the outer element.