Cards & Layout

App Shell

The minimal page shell: skip link, header slot, main landmark and footer slot, with the skip link and the main id kept in sync by construction.

Element: <main>
Module: @basenative/components
Function: renderAppShell

Quick start

Import the render function and call it from your server template.

import { renderAppShell, renderSiteHeader, renderSiteFooter } from '@basenative/components';

renderAppShell({ header: renderSiteHeader({ brand: { name: 'Acme' } }), main: '<p>Page body</p>', footer: renderSiteFooter({}) });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Skip link, header, main, footer

The shell owns the skip link and the main landmark’s id, so the two can never drift apart.

Live render

Page body goes in the main landmark.

Source

renderAppShell({
  header: renderSiteHeader({ brand: { name: 'Acme' }, items: [{ label: 'Home', href: '#home', current: true }] }),
  main: '<p>Page body goes in the main landmark.</p>',
  footer: renderSiteFooter({ legal: { text: '© 2026 Acme' } }),
})

Options

Arguments accepted by renderAppShell().

renderAppShell option reference
Option	Type	Default	Description
`header`	`string`	`''`	Header HTML slot (e.g. renderSiteHeader output).
`main`	`string`	`''`	Page body HTML slot.
`footer`	`string`	`''`	Footer HTML slot (e.g. renderSiteFooter output).
`mainId`	`string`	`'main-content'`	The main element’s id; the skip link targets it.