SiteBody

The SiteBody component provides the root container for your site with global styles and CSS variables.

Usage

Copy<script setup lang="ts">
import { SiteBody } from '@/components/SiteBody'
</script>

<template>
  <SiteBody>
    <!-- Your site content -->
  </SiteBody>
</template>

Features

CSS Variables

Sets up CSS variables for:

• --header-height: Height of the header
• --footer-height: Height of the footer

Global Styles

• Prevents overscroll (overscroll-none)
• Antialiasing for better text rendering
• Responsive footer height (smaller on mobile, larger on desktop)

API Reference

SiteBody

No props. Uses slot for content.

CSS Variables

Copy--header-height: calc(var(--spacing) * 14)
--footer-height: calc(var(--spacing) * 14) /* mobile */
--footer-height: calc(var(--spacing) * 24) /* xl screens */

Usage in Layout

Typically used as the root component in your app layout:

Copy<template>
  <SiteBody>
    <SiteHeader />
    <main>
      <slot />
    </main>
    <SiteFooter />
  </SiteBody>
</template>