# FlipCard

> Card that flips in 3D to reveal its back, on hover (plus focus and tap) or as a click toggle; it lifts and lands with a slight overshoot, keeps turning the way the pointer travels, and its faces catch a sweeping sheen and shade edge-on.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Cards
- Tags: card, flip, 3d, hover, click, toggle, animation, interactive
- Docs: https://fancy-ui.rama.app/docs/components/flip-card
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/flip-card

## Import

```svelte
<script lang="ts">
  import { FlipCard } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { FlipCard } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `rotate` | `"x" \| "y"` | `"y"` | Axis of rotation for the flip effect |
| `trigger` | `"hover" \| "click"` | `"hover"` | Hover flips on pointer hover, keyboard focus and tap; click makes the card a toggle button (click, tap, Enter, Space) |
| `flipped` | `boolean` | `false` | Whether the back is showing. Bindable |
| `onflip` | `(flipped: boolean) => void` | — | Called with the new state after every flip |
| `duration` | `number` | `700` | Length of one flip in milliseconds |
| `glare` | `boolean` | `true` | Light the faces as they turn: a sweeping sheen and an edge-on shade |
| `label` | `string` | — | Accessible name for the card |
| `class` | `string` | — | Additional classes; size the card here (default h-72 w-56) |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Front face content |
| `back` | Back face content |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { FlipCard } from "fancy-ui-svelte";
</script>

<FlipCard>
	<div
		class="flex size-full items-center justify-center bg-gradient-to-br from-purple-500 to-pink-500"
	>
		<p class="text-2xl font-bold text-white">Front</p>
	</div>
	{#snippet back()}
		<div class="flex size-full flex-col items-center justify-center">
			<p class="text-lg font-semibold">Back Side</p>
			<p class="text-muted-foreground mt-2 text-sm">Hover, focus or tap to flip</p>
		</div>
	{/snippet}
</FlipCard>
```

### X-Axis Rotation

Flip vertically.

```svelte
<script lang="ts">
	import { FlipCard } from "fancy-ui-svelte";
</script>

<FlipCard rotate="x">
	<div
		class="flex size-full items-center justify-center bg-gradient-to-br from-cyan-500 to-blue-500"
	>
		<p class="text-2xl font-bold text-white">Front</p>
	</div>
	{#snippet back()}
		<div class="flex size-full flex-col items-center justify-center">
			<p class="text-lg font-semibold">Flipped vertically!</p>
			<p class="mt-2 text-sm text-slate-400">rotate="x"</p>
		</div>
	{/snippet}
</FlipCard>
```

### Click to Flip

A toggle: click, tap, Enter or Space. The link on the back stays clickable, and bind:flipped drives it from outside.

```svelte
<script lang="ts">
	import { FlipCard } from "fancy-ui-svelte";

	let flipped = $state(false);
</script>

<div class="flex flex-col items-center gap-4">
	<FlipCard trigger="click" bind:flipped label="Membership card">
		<div
			class="flex size-full flex-col justify-between bg-gradient-to-br from-zinc-800 to-zinc-950 p-5 text-white"
		>
			<p class="text-xs tracking-widest text-white/60 uppercase">Member</p>
			<p class="text-2xl font-semibold">Ada Lovelace</p>
			<p class="text-xs text-white/60">Tap or press Enter to flip</p>
		</div>
		{#snippet back()}
			<div class="flex size-full flex-col justify-between">
				<p class="text-sm font-semibold">Perks</p>
				<ul class="text-muted-foreground space-y-1 text-sm">
					<li>Early access</li>
					<li>Priority support</li>
				</ul>
				<a class="text-sm font-medium underline underline-offset-4" href="#perks">
					See all perks
				</a>
			</div>
		{/snippet}
	</FlipCard>
	<button
		class="text-muted-foreground rounded-md border px-3 py-1.5 text-xs"
		onclick={() => (flipped = !flipped)}
	>
		{flipped ? "Show front" : "Show back"} (bind:flipped)
	</button>
</div>
```

### Multiple Cards

```svelte
<script lang="ts">
	import { FlipCard } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	{#each ["from-rose-500 to-orange-500", "from-emerald-500 to-teal-500", "from-violet-500 to-indigo-500"] as gradient, i}
		<FlipCard>
			<div class="flex size-full items-center justify-center bg-gradient-to-br {gradient}">
				<p class="text-2xl font-bold text-white">Card {i + 1}</p>
			</div>
			{#snippet back()}
				<div class="flex size-full flex-col items-center justify-center">
					<p class="text-lg font-semibold">Details #{i + 1}</p>
					<p class="mt-2 text-sm text-slate-400">More info here</p>
				</div>
			{/snippet}
		</FlipCard>
	{/each}
</div>
```