ArdoRoot

On this page

The whole site around the page: header with search, a sidebar with one section per route folder, the page, and the footer. Render it in app/root.tsx; pass ArdoHeader, ArdoSidebar, or ArdoFooter as children to change a part.

import { ArdoRoot } from "ardo/ui"

<ArdoRoot>{children}</ArdoRoot>

Props

Name	Type	Required	Description
`config`	`ArdoConfig`	No	The site config. Ardo's entries provide it from `ardo.config.ts`, so a root component can leave it out; pass it in tests and previews.
`components`	`ArdoMDXComponents`	No	Add to or override the default Markdown component set, including its wrapper.
`editLink`	`{ pattern: string; text?: string }`	No	Edit link configuration (applied site-wide via ArdoSiteConfig)
`lastUpdated`	`{ enabled?: boolean; text?: string; formatOptions?: Intl.DateTimeFormatOptions }`	No	Last updated configuration (applied site-wide via ArdoSiteConfig)
`labels`	`ArdoLabelsInput`	No	UI chrome labels and aria text, merged with English defaults.
`tocLabel`	`string`	No	TOC label (applied site-wide via ArdoSiteConfig)
`className`	`string`	No	Additional CSS classes for the layout
`scrollMode`	`ArdoScrollMode`	No	Choose the viewport shell (default) or let the document scroll.
`header`	`false \| ReactNode`	No	Site header in place of an `ArdoHeader` child: your own component, or `false` for no header. Children can only name Ardo's own header.
`footer`	`false \| ReactNode`	No	Site footer in place of an `ArdoFooter` child: your own component, or `false` for no footer. Without either, Ardo renders its default footer.
`sidebar`	`false \| ReactNode`	No	Sidebar in place of an `ArdoSidebar` child, or `false` for no sidebar. Without either, Ardo renders one section per top-level route folder.
`children`	`ReactNode`	No	Site chrome children: ArdoHeader, ArdoSidebar, ArdoFooter, and optional content overrides.

Props type: ArdoRootProps

Example

Minimal usage: header with search, a generated sidebar, and the footer

export default function Root() {
  return <ArdoRoot />
}

Example

With JSX chrome

export default function Root() {
  return (
    <ArdoRoot>
      <ArdoHeader>
        <ArdoNav>
          <ArdoNavLink to="/guide">Guide</ArdoNavLink>
        </ArdoNav>
      </ArdoHeader>
      <ArdoSidebar>
        <ArdoSidebarSection id="guide" label="Guide" to="/guide">
          <ArdoGeneratedSidebar section="guide" />
        </ArdoSidebarSection>
      </ArdoSidebar>
      <ArdoFooter message="Released under the MIT License." />
    </ArdoRoot>
  )
}