# Book

> 3D book component with cover, spine, and back face that opens on hover.

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

## Import

```svelte
<script lang="ts">
  import { Book } 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 { Book } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `duration` | `number` | `1000` | Hover animation duration in ms |
| `color` | `BookColor` | `"zinc"` | Color theme for the book cover gradient |
| `isStatic` | `boolean` | `false` | Show book in open position without hover animation |
| `size` | `BookSize` | `"md"` | Size variant of the book |
| `radius` | `BookRadius` | `"md"` | Border radius variant |
| `shadowSize` | `BookShadowSize` | `"lg"` | Drop shadow size variant |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content rendered on the book cover (front face) |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Book, BookHeader, BookTitle, BookDescription } from "fancy-ui-svelte";
</script>

<Book>
	<BookHeader>
		<span class="rounded bg-white/20 px-2 py-0.5 text-xs">Fiction</span>
	</BookHeader>
	<BookTitle>The Great Gatsby</BookTitle>
	<BookDescription>
		A story of the mysteriously wealthy Jay Gatsby and his love for Daisy Buchanan.
	</BookDescription>
</Book>
```

### Color Variants

```svelte
<script lang="ts">
	import { Book, BookTitle, BookDescription, type BookColor } from "fancy-ui-svelte";

	const colors: BookColor[] = ["blue", "purple", "emerald", "rose", "amber"];
</script>

<div class="flex flex-wrap justify-center gap-8">
	{#each colors as bookColor}
		<Book color={bookColor}>
			<BookTitle>{bookColor}</BookTitle>
			<BookDescription>Color variant</BookDescription>
		</Book>
	{/each}
</div>
```

### Sizes

Different book sizes.

```svelte
<script lang="ts">
	import { Book, BookTitle, BookDescription, type BookSize } from "fancy-ui-svelte";

	const sizes: BookSize[] = ["sm", "md", "lg", "xl"];
</script>

<div class="flex flex-wrap items-end justify-center gap-8">
	{#each sizes as bookSize}
		<Book size={bookSize} color="indigo">
			<BookTitle>{bookSize}</BookTitle>
			<BookDescription>Size variant</BookDescription>
		</Book>
	{/each}
</div>
```