RootLayout() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ RootLayout() — ui Function Reference

Dependency Diagram

graph TD
  58ed70f7_9107_730d_1db4_441a3f6b3447["RootLayout()"]
  42330d47_a82f_fbc5_51db_8d3eb776e598["layout.tsx"]
  58ed70f7_9107_730d_1db4_441a3f6b3447 -->|defined in| 42330d47_a82f_fbc5_51db_8d3eb776e598
  style 58ed70f7_9107_730d_1db4_441a3f6b3447 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/layout.tsx lines 69–117

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning className={fontVariables}>
      <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}')
                }
                if (localStorage.layout) {
                  document.documentElement.classList.add('layout-' + localStorage.layout)
                }
              } catch (_) {}
            `,
          }}
        />
        <meta name="theme-color" content={META_THEME_COLORS.light} />
      </head>
      <body
        className={cn(
          "group/body overscroll-none antialiased [--footer-height:calc(var(--spacing)*14)] [--header-height:calc(var(--spacing)*14)] xl:[--footer-height:calc(var(--spacing)*24)]"
        )}
      >
        <ThemeProvider>
          <LayoutProvider>
            <ActiveThemeProvider>
              <NuqsAdapter>
                <BaseTooltipProvider delay={0}>
                  <RadixTooltipProvider delayDuration={0}>
                    {children}
                    <Toaster position="top-center" />
                  </RadixTooltipProvider>
                </BaseTooltipProvider>
              </NuqsAdapter>
              <TailwindIndicator />
              <Analytics />
            </ActiveThemeProvider>
          </LayoutProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}