Book 3D
A 3D interactive book component that rotates on hover.
Installation
pnpm dlx rareui add book-3d
Usage
Usage
1
Import the component
import { Book3D } from '@/components/rareui/3d-elements/book-3d';
2
Use in your application
export default function App() {
return <Book3D />;
}
Examples
Examples
1
Custom Cover
<Book3D
src="/my-book-cover.jpg"
title="My Awesome Book"
subtitle="By John Doe"
/>
2
Custom Pages
const customPages = [
{
title: "Introduction",
content: "Welcome to my book. This is the first page with an introduction."
},
{
image: "/illustration.jpg",
caption: "A beautiful illustration"
},
{
title: "Chapter 1",
content: "The story begins here..."
},
{
quote: "Design is not just what it looks like and feels like. Design is how it works.",
author: "Steve Jobs"
}
];
<Book3D
src="/cover.jpg"
title="My Book"
pages={customPages}
/>
3
Fully Customized
<Book3D
src="/fantasy-cover.jpg"
title="The Chronicles"
subtitle="An Epic Tale"
width={250}
height={380}
pages={myCustomPages}
className="shadow-2xl"
/>
Features
Hover to open, click pages to flip.
Interactions
- Hover → Book opens (cover flips to the left)
- Click right page → Flip to next page
- Click left page → Flip back to previous page
- Mouse leave → Book closes automatically
Tips
- Keep
contenttext concise (50-100 words) for best readability - Use high-quality images with good contrast for the cover
- Limit pages to 4-6 for optimal user experience
- The book resets to page 1 when closed
Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Cover image URL. If not provided, shows RareUI branding. |
title | string | - | Title displayed on cover. |
subtitle | string | - | Subtitle displayed on cover. |
pages | PageData[] | [...] | Array of page content objects. Defaults to RareUI demo pages. |
width | number | 230 | Book width in pixels. |
height | number | 350 | Book height in pixels. |
className | string | - | Additional CSS classes for the container. |
PageData Interface
Each page in the pages array can have the following properties:
interface PageData {
title?: string // Page title
content?: string // Main text content
image?: string // Image URL
caption?: string // Image caption (not currently used)
quote?: string // Blockquote text
author?: string // Quote attribution
}Page Types
You can create different types of pages:
Text Page:
{
title: "Chapter 1",
content: "Your text content here..."
}Image Page:
{
image: "/path/to/image.jpg",
caption: "Optional caption"
}Quote Page:
{
quote: "The only limit is your imagination.",
author: "Unknown"
}Mixed Content:
{
title: "Chapter 2",
content: "Some text...",
image: "/image.jpg"
}