Installation
pnpm dlx rareui add realistic-book
Usage
1
Basic Usage
Use the component with default settings or customize content.
Example
import { Book3D } from '@/components/ui/realistic-book';
export default function MyBook() {
return (
<Book3D
title="My Story"
subtitle="A tale of code"
pages={[
{ title: "Chapter 1", content: "Once upon a time..." }
]}
/>
);
}2
Custom Cover Image
Provide a source URL for a full-cover image.
Example
<Book3D
src="/path/to/cover.jpg"
width={300}
height={400}
/>Features
Seamlessly integrated and optimized for high-performance React applications.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL for the book cover image. |
title | string | - | Title text to display on the cover. |
subtitle | string | - | Subtitle text to display on the cover. |
pages | PageData[] | defaultPages | Array of page content (title, content, image, caption, quote). |
width | number | 230 | Width of the book in pixels. |
height | number | 350 | Height of the book in pixels. |