ArdoRootLayout

Sur cette page

Cette référence API est générée à partir des commentaires TypeScript en anglais. Les noms, signatures et exemples correspondent au paquet publié.

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.
`icon`	`string`	No	Favicon URL, usually an imported asset. Defaults to the `icon` passed to `ArdoRoot`, then to the generated owl icons. Its response supplies the MIME type.
`appleTouchIcon`	`string`	No	180×180 PNG for iOS home screens. Defaults to `ArdoRoot`'s, then to the generated one.
`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")
`colorScheme`	`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 a favicon

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

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