ArdoRootLayout

On this page

Default HTML shell for Ardo sites. Ardo renders it on the server only; the page inside it hydrates. Export a Layout from root.tsx to customize it.

import { ArdoRootLayout } from "ardo/ui"

<ArdoRootLayout>{children}</ArdoRootLayout>

Props

Name	Type	Required	Description
`children`	`ReactNode`	Yes
`className`	`string`	No	HTML class for inherited site tokens, including UI portaled outside the app root.
`favicon`	`string`	No	Custom favicon URL. Its response supplies the MIME type; defaults to /icon.svg.
`iconBasePath`	`false \| string`	No	Base URL for generated icon files. Set to `false` to render only the inline fallback favicon link.
`lang`	`string`	No	Language attribute for `<html>` (default: from config or "en")
`theme`	`ArdoThemePreference`	No	Theme policy applied before first paint. - `"auto"` keeps the user-selectable mode: stored `ardo-theme` first, then system preference. This is the default. - `"light"` / `"dark"` force one mode and clear stale stored preferences. - `"system"` always follows `prefers-color-scheme` and clears stale stored preferences.

Props type: ArdoRootLayoutProps

Example

With favicon

// app/root.tsx
import type { ReactNode } from "ardo/react"
import { ArdoRootLayout } from "ardo/ui"
import logo from "./assets/logo.svg"

export function Layout({ children }: { children: ReactNode }) {
  return <ArdoRootLayout favicon={logo}>{children}</ArdoRootLayout>
}