Root Layout
The global root layout — provider hierarchy, fonts, metadata, and how the application is bootstrapped.
Root Layout
File: frontend/src/app/layout.tsx
The root layout wraps every page in the application. It establishes the global provider hierarchy, loads fonts, sets metadata, and configures theme support.
Provider Hierarchy
<html>
<body>
<ThemeProvider> ← Dark/light theme management
<AuthProvider> ← JWT authentication state
<TooltipProvider> ← Tooltip context for Shadcn UI
{children} ← Page content
<Toaster /> ← Toast notification container
</TooltipProvider>
</AuthProvider>
</ThemeProvider>
</body>
</html>Typography
The layout loads two Google Fonts using Next.js optimized font loading:
| Font | CSS Variable | Usage |
|---|---|---|
| Geist (sans-serif) | --font-geist-sans | Primary body text, UI elements |
| Geist Mono (monospace) | --font-geist-mono | Code blocks, IDs, technical values |
Both fonts are loaded via next/font/google for optimal performance (no layout shift, preloading).
Metadata
export const metadata: Metadata = {
title: "SLMS",
description: "Smart Library Management System",
};This sets the default <title> and <meta name="description"> for all pages (can be overridden per-page).
HTML Configuration
<html lang="en" suppressHydrationWarning
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>lang="en"— Sets page language for accessibilitysuppressHydrationWarning— Required bynext-themesto avoid hydration mismatch with theme classh-full antialiased— Full height, smooth font rendering- Font variables — Applied as CSS custom properties for Tailwind consumption
Body Configuration
<body className="min-h-full flex flex-col">Ensures the body fills the viewport and allows flex layouts for sticky headers/sidebars.
Toaster Configuration
<Toaster position="top-right" richColors />- Position: Top-right corner of the viewport
- Rich Colors: Success = green, Error = red, Info = blue
- Library: Sonner