Book

A 3D book component featuring customizable sizes and color gradients.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://inspira-ui.com/r/book.json"

Install Manually

Copy and paste the following code in the same folder

Book.vue
BookHeader.vue
BookTitle.vue
BookDescription.vue
index.ts

API

Components props

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.