Skip to main content

​
Overview

Book is a 3D book component with customizable sizes, color gradients, and optional hover animations. Perfect for showcasing content in a visually appealing way.

​
Usage

<template>
  <Book color="zinc" size="md" :duration="1000">
    <BookHeader>
      <BookTitle>Book Title</BookTitle>
      <BookDescription>Book description text</BookDescription>
    </BookHeader>
  </Book>
</template>

​
API Reference

​
Book

Prop NameTypeDefaultDescription
classString-Additional classes for styling the component.
durationNumber1000Animation duration in milliseconds.
colorString”zinc”Color theme for the book gradient.
isStaticBooleanfalseDisables hover animations when true.
sizeString”md”Size variant of the book.
radiusString”md”Border radius variant of the book.
shadowSizeString”lg”Shadow size variant of the book.

​
BookHeader

Prop NameTypeDefaultDescription
classString-Additional classes for custom styling.

​
BookTitle

Prop NameTypeDefaultDescription
classString-Additional classes for custom styling.

​
BookDescription

Prop NameTypeDefaultDescription
classString-Additional classes for custom styling.

​
Credits

  • Credits to x/UI for inspiring this component.
  • Credits to kalix127 for porting this component.

Build docs developers (and LLMs) love

Get started for freeTalk to us