Appcomponent

App({ children, ...meta }: AppProps): ReactElement

Param	Type
`meta`	`AppProps`	Props for <App> — the root Meta plus the application children. required

Return
`ReactElement`

Root component for an application, providing the top-level Meta context and global styles.

Descendants can read or update metadata via the provided <Meta> context.
Design tokens and body baseline typography are set globally via the style/ token modules (Color, Size, Font, …).

Root component for a client-side Shelving app. <App> applies the theme CSS class to document.body and provides a Meta context so every descendant can read or update page metadata.

Use <App> when mounting into an existing HTML page on the client. For server-side rendering where you need the full <html> document shell, use <HTML> instead.

A minimal app

The smallest single-screen app — <App> wraps a layout and some content:

tsx

import { App, CenteredLayout, Section, Title, Paragraph } from "shelving/ui";

function HelloApp() {
  return (
    <App app="My app">
      <CenteredLayout>
        <Section width="narrow">
          <Title>Hello</Title>
          <Paragraph>Welcome to the app.</Paragraph>
        </Section>
      </CenteredLayout>
    </App>
  );
}

A routed app

For a multi-page app, wrap the routes in <Navigation> and <Router>:

tsx

import { App, Navigation, Router } from "shelving/ui";

export function MyApp() {
  return (
    <App app="My app" root="https://example.com/" url="/">
      <Navigation>
        <Router routes={{
          "/": HomePage,
          "/about": AboutPage,
        }} />
      </Navigation>
    </App>
  );
}

Setting a root URL on <App> is strongly recommended. root is the base that site-absolute links and assets (/favicon.png, /base.css) resolve against, the <base> tag rendered by <HTML>, and the prefix <Router> strips when matching routes. When it's unset, merging a url into the meta context derives root from that URL's origin (e.g. https://example.com/) — a safe fallback for apps served from the domain root, but wrong for apps deployed under a sub-path, so set it explicitly whenever your app doesn't live at /.

<App> accepts all PossibleMeta props (app, root, url, title, language, tags, etc.) and merges them into the context it provides to children. On mount it adds the theme class to document.body, which activates the CSS custom property tokens defined in App.module.css; on unmount it removes it.

For a documentation site, hand an extracted tree to <TreeApp> instead — see the shelving/extract guide.