Working boilerplate

app/globals.css

@@ -8,8 +8,6 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -19,6 +17,12 @@
   }
 }
 
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);

app/layout.tsx

@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
 import './lib/dist/index.css'
+import "./globals.css";
+
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

app/lib/package-lock.json

@@ -18,6 +18,7 @@
         "rollup": "^4.20.0",
         "rollup-plugin-peer-deps-external": "^2.2.4",
         "rollup-plugin-postcss": "^4.0.2",
+        "tailwindcss": "^4.1.18",
         "typescript": "^5.5.4"
       },
       "peerDependencies": {
@@ -2342,6 +2343,13 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",

app/lib/package.json

@@ -24,6 +24,7 @@
     "rollup": "^4.20.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.5.4"
   }
 }

app/lib/src/components/Body/Body.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+
+interface BodyProps {
+    children?: ReactNode;
+    renderFn?: () => ReactNode;
+    className?: string;
+}
+
+export const Body: React.FC<BodyProps> = ({
+                                              children,
+                                              renderFn,
+                                              className = "",
+                                          }) => {
+    return (
+        <main
+            className={`h-[80vh] overflow-auto px-6 py-4 bg-neutral-800 text-white ${className}`}
+        >
+            {renderFn ? renderFn() : children}
+        </main>
+    );
+};

app/lib/src/components/Button/Button.module.css

@@ -1,27 +0,0 @@
-.btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 14px;
-    transition: background-color 0.2s;
-}
-
-.btnPrimary {
-    background: #007bff;
-    color: white;
-}
-
-.btnPrimary:hover:not(:disabled) {
-    background: #0056b3;
-}
-
-.btnSecondary {
-    background: #6c757d;
-    color: white;
-}
-
-.btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}

app/lib/src/components/Button/Button.tsx

@@ -1,28 +0,0 @@
-// src/components/Button/Button.tsx
-import React from 'react';
-import styles from './Button.module.css';
-
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: 'primary' | 'secondary';
-};
-
-export const Button: React.FC<ButtonProps> = ({
-                                                  variant = 'primary',
-                                                  className,
-                                                  children,
-                                                  ...props
-                                              }) => {
-    const variantClass =
-        variant === 'primary' ? styles.btnPrimary : styles.btnSecondary;
-
-    return (
-        <button
-            className={[styles.btn, variantClass, className]
-                .filter(Boolean)
-                .join(' ')}
-            {...props}
-        >
-            {children}
-        </button>
-    );
-};

app/lib/src/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+
+interface FooterProps {
+    children?: ReactNode;
+    renderFn?: () => ReactNode;
+    className?: string;
+}
+
+export const Footer: React.FC<FooterProps> = ({
+                                                  children,
+                                                  renderFn,
+                                                  className = "",
+                                              }) => {
+    return (
+        <footer
+            className={`h-[10vh] flex items-center justify-center px-6 bg-neutral-900 text-white ${className}`}
+        >
+            {renderFn ? renderFn() : children}
+        </footer>
+    );
+};

app/lib/src/components/Header/Header.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+
+interface HeaderProps {
+    children?: ReactNode;
+    renderFn?: () => ReactNode;
+    className?: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({
+                                                  children,
+                                                  renderFn,
+                                                  className = "",
+                                              }) => {
+    return (
+        <header
+            className={`h-[10vh] flex items-center px-6 bg-neutral-900 text-white ${className}`}
+        >
+            {renderFn ? renderFn() : children}
+        </header>
+    );
+};

app/lib/src/index.ts

@@ -1 +1,5 @@
-export { Button } from './components/Button/Button';
+import './styles.css';
+
+export {Header} from './components/Header/Header';
+export {Body} from './components/Body/Body';
+export {Footer} from './components/Footer/Footer';

app/page.css

@@ -0,0 +1,5 @@
+.page-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}

app/page.tsx

@@ -1,10 +1,16 @@
-import {Button} from "./lib"
-
+import {Header, Body, Footer} from "./lib"
+import "./page.css"
 export default function Home() {
-  return (
-    <div>
-      <Button variant="primary">Click me</Button>
-        <Button variant="secondary">Click me</Button>
-    </div>
-  );
-}
+    const buildHeader = () => <h1>My Custom Header</h1>;
+
+    return (
+        <div className="page-container">
+            <Header renderFn={buildHeader} />
+            <Body>
+                <h1>Main Content</h1>
+                <p>Your page content here...</p>
+            </Body>
+            <Footer renderFn={() => <p>© 2025 Custom Footer</p>} />
+        </div>
+    );
+};

package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "npm run build:modules && next dev",
     "build": "next build",
+    "build:modules": "cd app/lib && npm run build",
     "start": "next start",
     "lint": "eslint"
   },