IAppShell ​

The page frame: header, sidebar, main and footer. Every slot takes whatever you put in it — navigation, account menu and routing stay yours, and ISidebar works with or without the shell.

<IAppShell>
  <template #header><AppHeader /></template>
  <template #sidebar><ISidebar :items="nav" /></template>

  <IContainer>
    <IPageHeader title="Overview" />
    <!-- the page -->
  </IContainer>

  <template #footer><AppFooter /></template>
</IAppShell>

Each of header, sidebar and footer is rendered only when you fill it, so a shell with just a header is a header and a content column, with no empty rails left behind.

Two scroll models ​

scroll picks between two layouts.

main, the default, pins the shell to the viewport and scrolls only the content column. The header and sidebar never move — what a data app wants.

page scrolls the document, with a sticky header and a sticky sidebar. Anchor links and the browser's scroll restoration work in this mode, so content and marketing pages want it. Being sticky rather than fixed, the sidebar travels up with the end of the body and the footer pushes it off screen.

<IAppShell scroll="page">
  <template #header><AppHeader /></template>
  <template #sidebar><ISidebar :items="nav" /></template>
  <template #footer><AppFooter /></template>
</IAppShell>

The shell itself is the scroll container here, and the header sticks within it.

page mode sizes its sidebar against 100svh, so the boxed demo above overrides three values to keep the rail inside its frame:

<IAppShell
  scroll="page"
  :ui="{
    root: 'h-72 min-h-0 overflow-y-auto',
    body: 'flex-none',
    sidebar: 'h-[calc(18rem-var(--iryx-shell-header-height,0px))] max-h-none',
  }"
>

A full-page shell needs none of that.

In page mode the shell measures its own header and publishes the height as --iryx-shell-header-height. Use that variable to offset anything you stick below the header yourself.

Sidebar on the right ​

<IAppShell sidebar-position="right">
  <template #sidebar><ISidebar :items="nav" side="right" /></template>
</IAppShell>

sidebarPosition moves the column; ISidebar's own side decides which edge carries its border. Set both.

Where the footer sits ​

Without a sidebar the shell is a header, a content column and the footer.

<IAppShell>
  <template #header><AppHeader /></template>
  <template #footer><AppFooter /></template>
</IAppShell>

In main mode the footer is pinned below the scrolling column, so it stays visible however long the page is. In page mode it sits at the end of the document, where a footer normally lives.

Props ​

Slots ​

Pair it with IContainer for the content width and IPageHeader for the title row.