RootLayout() — ui Function Reference

Architecture documentation for the RootLayout() function in layout.tsx from the ui codebase.

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ RootLayout() — ui Function Reference

Dependency Diagram

graph TD
  31006283_8d6b_f5ba_042c_9b6fa2867e34["RootLayout()"]
  107ecc73_f7ba_852f_6055_a4afe8ee6738["layout.tsx"]
  31006283_8d6b_f5ba_042c_9b6fa2867e34 -->|defined in| 107ecc73_f7ba_852f_6055_a4afe8ee6738
  style 31006283_8d6b_f5ba_042c_9b6fa2867e34 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/layout.tsx lines 75–122

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <>
      <html lang="en" suppressHydrationWarning>
        <head>
          <script
            dangerouslySetInnerHTML={{
              __html: `
              try {
                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
                }
              } catch (_) {}
            `,
            }}
          />
        </head>
        <body
          className={cn(
            "min-h-svh bg-background font-sans antialiased",
            fontSans.variable,
            fontMono.variable
          )}
        >
          <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
            enableColorScheme
          >
            <div vaul-drawer-wrapper="">
              <div className="relative flex min-h-svh flex-col bg-background">
                {children}
              </div>
            </div>
            <TailwindIndicator />
            <ThemeSwitcher />
            <Analytics />
            <NewYorkToaster />
            <DefaultToaster />
            <NewYorkSonner />
          </ThemeProvider>
        </body>
      </html>
    </>
  )
}