Premium & Brand

Flip Card

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

Import

tsx

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

bash

npx cooud-ui add flip-card

Examples

Hover to flip

The default trigger flips on pointer hover and keyboard focus, so it's fully operable without a mouse. The inactive face is `inert` — its content never double-reads to a screen reader. Hover the card to reveal the plan's benefits.

Plano Pro

Tudo o que você precisa para escalar a sua loja.

Passe o mouse →

Repasses em D+2
Checkout sem marca
Suporte prioritário

tsx

<FlipCard aria-label="Plano Pro" className="h-72 w-full max-w-xs">
  <FlipCardFront className="justify-between p-6">
    <span className="grid size-11 place-items-center rounded-xl bg-gradient-primary text-primary-foreground shadow-glow">
      <Sparkles className="size-5" aria-hidden="true" />
    </span>
    <div>
      <h3 className="font-display text-lg font-semibold text-fg">Plano Pro</h3>
      <p className="mt-1 text-sm text-fg-secondary">
        Tudo o que você precisa para escalar a sua loja.
      </p>
    </div>
    <span className="text-xs font-medium text-fg-tertiary">Passe o mouse →</span>
  </FlipCardFront>
  <FlipCardBack className="justify-between p-6">
    <ul className="flex flex-col gap-2.5 text-sm text-fg-secondary">
      <li className="flex items-center gap-2">
        <Check className="size-4 shrink-0 text-primary" aria-hidden="true" />
        Repasses em D+2
      </li>
      <li className="flex items-center gap-2">
        <Check className="size-4 shrink-0 text-primary" aria-hidden="true" />
        Checkout sem marca
      </li>
      <li className="flex items-center gap-2">
        <Check className="size-4 shrink-0 text-primary" aria-hidden="true" />
        Suporte prioritário
      </li>
    </ul>
    <Button variant="gradient" className="w-full">
      Assinar o Pro
      <ArrowRight aria-hidden="true" className="size-4" />
    </Button>
  </FlipCardBack>
</FlipCard>

Click to flip

`trigger="click"` turns the whole card into a single button — it toggles on click, Enter or Space and exposes `role="button"` + `aria-pressed`. Give it an `aria-label` so the control is named. Click to read the testimonial.

Ana Ribeiro

Head of Design, Northwind

Clique para ler

“Shipped a polished, on-brand UI in a weekend. The theming alone paid for itself.”

tsx

<FlipCard
  trigger="click"
  aria-label="Ver depoimento de Ana Ribeiro"
  className="h-72 w-full max-w-xs"
>
  <FlipCardFront className="items-center justify-center gap-3 p-6 text-center">
    <span className="grid size-16 place-items-center rounded-full bg-surface-overlay text-lg font-semibold text-fg-secondary">
      AR
    </span>
    <div>
      <p className="font-display text-base font-semibold text-fg">Ana Ribeiro</p>
      <p className="text-sm text-fg-tertiary">Head of Design, Northwind</p>
    </div>
    <span className="text-xs text-fg-tertiary">Clique para ler</span>
  </FlipCardFront>
  <FlipCardBack className="items-center justify-center gap-4 p-6 text-center">
    <div className="flex gap-0.5 text-primary">
      {[1, 2, 3, 4, 5].map((n) => (
        <Star key={n} className="size-4 fill-current" aria-hidden="true" />
      ))}
    </div>
    <p className="text-sm leading-relaxed text-fg">
      “Shipped a polished, on-brand UI in a weekend. The theming alone paid for itself.”
    </p>
    <div className="flex items-center gap-3 text-fg-tertiary">
      <Github className="size-4" aria-hidden="true" />
      <Linkedin className="size-4" aria-hidden="true" />
    </div>
  </FlipCardBack>
</FlipCard>

Controlled

`trigger="controlled"` never self-flips — you own the `flipped` prop and drive it from anywhere. Here a Button toggles between an order summary and its breakdown, tumbling on the vertical axis.

Pedido #4821Pago

R$ 297,00

Curso de Copywriting

Toque em “Ver detalhes”.

Composição

Subtotal: R$ 320,00
Cupom BEMVINDO: − R$ 23,00
Total: R$ 297,00

tsx

function OrderCard() {
  const [flipped, setFlipped] = useState(false);
  return (
    <div className="flex flex-col items-center gap-4">
      <FlipCard
        trigger="controlled"
        flipped={flipped}
        axis="vertical"
        aria-label="Detalhe do pedido"
        className="h-64 w-full max-w-xs"
      >
        <FlipCardFront className="justify-between p-6">
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">
              Pedido #4821
            </span>
            <span className="rounded-full bg-success/15 px-2.5 py-0.5 text-xs font-medium text-success">
              Pago
            </span>
          </div>
          <div>
            <p className="font-display text-3xl font-semibold text-fg">R$ 297,00</p>
            <p className="mt-1 text-sm text-fg-secondary">Curso de Copywriting</p>
          </div>
          <p className="text-xs text-fg-tertiary">Toque em “Ver detalhes”.</p>
        </FlipCardFront>
        <FlipCardBack className="justify-between p-6">
          <p className="text-xs font-medium uppercase tracking-wide text-fg-tertiary">Composição</p>
          <dl className="flex flex-col gap-2 text-sm">
            <div className="flex items-center justify-between">
              <dt className="text-fg-secondary">Subtotal</dt>
              <dd className="tabular-nums text-fg">R$ 320,00</dd>
            </div>
            <div className="flex items-center justify-between">
              <dt className="text-fg-secondary">Cupom BEMVINDO</dt>
              <dd className="tabular-nums text-success">− R$ 23,00</dd>
            </div>
            <div className="flex items-center justify-between border-t border-border pt-2 font-medium">
              <dt className="text-fg">Total</dt>
              <dd className="tabular-nums text-fg">R$ 297,00</dd>
            </div>
          </dl>
        </FlipCardBack>
      </FlipCard>
      <Button size="sm" variant="outline" onClick={() => setFlipped((value) => !value)}>
        <RotateCw aria-hidden="true" className="size-4" />
        {flipped ? "Ver resumo" : "Ver detalhes"}
      </Button>
    </div>
  );
}

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.