Main

Basic Usage

Place Main between Header and Footer in your root layout. The demo below caps the height so it fits the page; in a real layout the container stretches to the viewport.

<script lang="ts">
  import { Header, Main, Footer } from 'sv5ui';
</script>

<Header title="Acme" />

<Main>
  <!-- Page content. The container is at least
       100svh minus the header height tall. -->
</Main>

<Footer>
  <p>Copyright 2026 Acme Inc.</p>
</Footer>

The Height Contract

sv5ui/theme.css defines --ui-header-height: 4rem. Header consumes it for its own height, and Main / Error subtract it from 100svh. If your app renders no header, set the variable to 0px so Main fills the whole viewport.

/* theme.css ships --ui-header-height: 4rem.
   If your app has no <Header>, zero it out so
   Main fills the whole viewport. */
:root {
  --ui-header-height: 0px;
}

Custom Header Height

Change the variable once and every app shell component stays in sync. See the Theming guide for the full list of CSS variables.

/* A taller header: set the variable once and
   Header, Main, and Error all stay in sync. */
:root {
  --ui-header-height: 5rem;
}

Render as Another Element

Main renders a <main> landmark by default. If your layout already provides one, switch the element with as to keep the HTML valid.

<!-- Render as a different element when your layout
     already provides the <main> landmark. -->
<Main as="div" class="bg-surface-container-low">
  ...
</Main>

UI Slots

Use the `ui` prop to override classes on internal elements.

Props