Customisation
BookProvider configuration
Book-wide settings via BookProvider props
Configure your textbook by passing props to <BookProvider> in your layout (e.g. src/layout.tsx):
import { BookProvider } from "@bside-tech/tbx";
<BookProvider
language="en"
pageRatio={1448 / 2048}
sidebarWidth="17em"
pages={pages}
chapters={chapters}
onHotspotActive={onHotspotActive}
InteractivePageImageComponent={ImageWithHotspots}
>
{children}
</BookProvider>| Property | Description | Default |
|---|---|---|
language | Exercise UI language ("en" | "ro") | "en" |
pageRatio | Aspect ratio of page images (width / height). Match your source image dimensions. | 1448 / 2048 |
sidebarWidth | Width of the table-of-contents sidebar (CSS value) | "17em" |
pages | Page data (from virtual:toc) | required |
chapters | Chapter data (from virtual:toc) | required |
onHotspotActive | Callback when a hotspot is clicked | — |
InteractivePageImageComponent | Custom component for interactive page images | — |
Page images
Set pageRatio to match your page image dimensions. For example, a 1448×2048 image uses 1448 / 2048. This keeps page display proportional and avoids distortion.
Colors
Colors are customised via src/book/custom.css. TBX uses HeroUI v3 for UI components. Override theme variables in custom.css for light and dark themes:
:root,
.light,
[data-theme="light"] {
--accent: oklch(77.83% 0.1175 96.87);
--background: oklch(97.02% 0.0017 96.87);
/* ... other variables */
}
.dark,
[data-theme="dark"] {
--accent: oklch(77.83% 0.1175 96.87);
--background: oklch(12.00% 0.0017 96.87);
/* ... other variables */
}Include custom.css in your global CSS (e.g. after @import "@heroui/styles"). See HeroUI theming for available variables and options.