Loading component…
Components /3D Books Showcase
Three.js 3D interactive books showcase with procedural rendering
Run the following command
npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/books-showcase.json| Prop Name | Type | Default | Description |
|---|---|---|---|
| books | BookCfg[] | - | Array of book configurations to display in the showcase. |
| heroTitle | string | 'Books' | The large background text shown when no book is focused. |
| navTitle | string | 'Bestsellers' | The small heading displayed above the book collection. |
| showNav | boolean | true | Whether to show the top navigation bar. |
| showDetailPanel | boolean | true | Whether to show the details panel when a book is clicked. |
| showCarousel | boolean | true | Whether to show carousel controls when more than three books are supplied. |
| themeColors | BooksShowcaseTheme | - | Overrides accent colors plus independent light/dark backgrounds and foregrounds. |
| className | string | - | Additional CSS classes for the main wrapper. |
| onBookSelect | (book: BookCfg | null) => void | - | Callback triggered when a book is selected or deselected. |
| Prop Name | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique identifier for the book. |
| title | string | - | Title of the book. |
| author | string | - | Author of the book. |
| year | string | - | Publication year. |
| stars | number | - | Number of stars (out of 5) for the rating. |
| desc | string | - | Short description or synopsis. |
| coverURL | string | null | Optional URL for the front cover image (jpg/png/webp). |
| spineBg | string | - | Hex color for the spine background. |
| spineInk | string | - | Hex color for the spine text. |
| backBg | string | - | Hex color for the back cover background. |
| backInk | string | - | RGB comma-separated color for back cover text (e.g., '255,255,255'). |
| edge | string | - | Hex color for the page edges. |
| Prop Name | Type | Default | Description |
|---|---|---|---|
| navy | string | '#141a32' | Detail-view background and primary dark accent. |
| pink | string | '#f591ac' | Detail title and rating accent. |
| cream | string | '#fdfbf4' | High-contrast controls and labels. |
| lav | string | '#c9d0ee' | Detail body copy and muted controls. |
| peri | string | '#96a2de' | Primary action background. |
| bgLight | string | '#fafafa' | Hero background in light mode. |
| bgDark | string | '#18181b' | Hero background in dark mode. |
| foregroundLight | string | '#18181b' | Hero text in light mode. |
| foregroundDark | string | '#fafafa' | Hero text in dark mode. |