Header

Usage

<SHeader>
  <span class="font-semibold">My App</span>
  <template #right>
    <SColorModeToggle />
  </template>
</SHeader>

SHeader is sticky top-0 by default, meant to sit above everything else on the page - this docs site's own top bar is exactly this component. If you also use PageAside below it (for nav or TOC), give it a matching offset via its ui prop so it doesn't sit under the header:

<SPageAside :ui="{ root: 'top-16 h-[calc(100vh-4rem)]' }">

(top-16/h-4rem match SHeader's default h-16 - adjust both together if you override the header's height.)

Custom :ui

Global and scoped recipe overrides use ui.header.

To see exactly what you'd be overriding - the current default classes for every slot - here's Header's own theme file:

Props

Slots