Components

Flip Card

A card that flips on hover or click to reveal a back face.

php artisan blatui:add flip-card

Aurora Plan

Hover to see the details

$19/mo

Unlimited projects
Priority support
Custom domains

<x-ui.flip-card class="max-w-xs">
    <x-slot:front>
        <div class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
            <x-lucide-sparkles class="size-8 text-primary" aria-hidden="true" />
            <h3 class="text-lg font-semibold">Aurora Plan</h3>
            <p class="text-muted-foreground text-sm">Hover to see the details</p>
        </div>
    </x-slot:front>

    <x-slot:back>
        <div class="flex flex-1 flex-col justify-center gap-3 text-center">
            <p class="text-3xl font-bold">$19<span class="text-muted-foreground text-base font-normal">/mo</span></p>
            <ul class="text-muted-foreground space-y-1 text-sm">
                <li>Unlimited projects</li>
                <li>Priority support</li>
                <li>Custom domains</li>
            </ul>
        </div>
    </x-slot:back>
</x-ui.flip-card>

Click

<x-ui.flip-card trigger="click" class="max-w-xs">
    <x-slot:front>
        <div class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
            <x-lucide-mouse-pointer-click class="size-8 text-primary" aria-hidden="true" />
            <h3 class="text-lg font-semibold">Tap to reveal</h3>
            <p class="text-muted-foreground text-sm">Click anywhere on the card</p>
        </div>
    </x-slot:front>

    <x-slot:back>
        <div class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
            <x-lucide-gift class="size-8 text-primary" aria-hidden="true" />
            <h3 class="text-lg font-semibold">You found it!</h3>
            <p class="text-muted-foreground text-sm">Click again to flip back</p>
        </div>
    </x-slot:back>
</x-ui.flip-card>

API Reference

Props, slots and exposed methods for <x-ui.flip-card>.

Props

Prop	Type	Default	Description
`trigger`	`string`	`'hover'`	What flips the card. "hover" flips on pointer hover and keyboard focus; "click" makes the card a button that toggles on click. `hover` `click`
`height`	`string`	`'16rem'`	CSS height for the perspective box. Required because the two faces are absolutely positioned, so the box has no intrinsic height.

Slots

Slot	Description
`front`	The front face shown before flipping. If omitted, the default slot is used as the front face instead.
`back`	The back face revealed after flipping.
`default`	Fallback front face used only when no named front slot is provided.