Cards Fancy Stable
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
Preview
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>Installation
pnpm add fancy-ui-svelte
import { FlipCard } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { FlipCard } from 'fancy-ui-svelte';
</script>
<FlipCard />Examples
Basic Usage
svelte
<script lang="ts">
import { FlipCard } from "$lib/fancy-ui/flip-card";
</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 "$lib/fancy-ui/flip-card";
</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 "$lib/fancy-ui/flip-card";
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 "$lib/fancy-ui/flip-card";
</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>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) |
Slots
| Slot | Description |
|---|---|
children | Front face content |
back | Back face content |
Links
Related components
Ap
AppleCardCarousel
Horizontal card carousel where the focused card expands into a spring-animated full-screen view
Cards Stable
Be
BentoGrid
Bento-style grid layout with slot-based and props-based card variants
Cards Stable
Bo
Book
3D book component with cover, spine, and back face that opens on hover
Cards Stable