Book

A 3D book component with a cover and page edges. It rotates on hover with a shadow effect. Use it to display book-like items in a visually engaging way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/book

npx layro-cli add @educlopez/book

npx layro-cli add @educlopez/book

bunx layro-cli add @educlopez/book

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import type { ReactNode } from "react";

export type BookVariant = "stripe" | "simple";

export interface BookProps {
  /** Additional CSS classes */
  className?: string;
  /** Cover accent color (CSS color value) */
  color?: string;
  /** Custom illustration for the stripe area (stripe variant only) */