A document wrapper that sets the page `<title>` and `<meta name="description">` and wraps its children in one root element — no header, footer or layout regions.

pnpm add @behivetech/templates.page

You are viewing Page v0.3.5, snapshotted 2026-11-09. The latest is v0.3.6. Go to the latest →

registry/behivetech/templates/page at v0.3.5, snapshotted 2026-11-09

page.tsx
1import { type HTMLAttributes } from "react";
2import { getClassName } from "@bht-component-registry/class-names";
3import styles from "./page.module.scss";
4
5export interface PageProps extends HTMLAttributes<HTMLDivElement> {
6 /** Document title rendered into a `<title>` tag */
7 title?: string;
8 /** Meta description rendered into a `<meta name="description">` tag */
9 description?: string;
10 /** Additional class names to merge with the component root element */
11 className?: string;
12 /** Page content */
13 children?: React.ReactNode;
14}
15
16export const Page = ({
17 title,
18 description,
19 className,
20 children,
21 ...rest
22}: PageProps) => {
23 const [rootClass] = getClassName({
24 className,
25 rootClass: "BHT__Page",
26 styles,
27 });
28
29 return (
30 <>
31 {title && <title>{title}</title>}
32 {description && <meta name="description" content={description} />}
33 <div {...rest} className={rootClass}>
34 {children}
35 </div>
36 </>
37 );
38};
page.module.scss
1.BHT__Page {
2 min-height: 100vh;
3 width: 100%;
4}
index.ts
1export { Page } from "./page.js";
2export type { PageProps } from "./page.js";
page.example.tsx
1import { Page } from "./page.js";
2
3export const BasicPage = () => (
4 <Page
5 title="Example Page"
6 description="An example page using the Page template"
7 >
8 <h1>Welcome</h1>
9 <p>This page has no extra margin, padding, or border around it.</p>
10 </Page>
11);