Book

Preview

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>

Installation

pnpm add fancy-ui-svelte

import { Book } from 'fancy-ui-svelte'

Usage

svelte

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

<Book />

Examples

Basic Usage

svelte

<script lang="ts">
	import { Book, BookHeader, BookTitle, BookDescription } from "$lib/fancy-ui/book";
</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 "$lib/fancy-ui/book";

	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 "$lib/fancy-ui/book";

	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>

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