Page Shell

Standard page container with built-in handling for loading, error, and empty states.

layout stable packages/design-system/src/components/pages/base/PageShell.svelte
Surface
Viewport

Component preview for Page Shell

Presets

Props

Main page heading
Secondary page heading
Whether to show the loading state
Error message to display (null to hide)
Whether to show the empty state

Usage

<PageShell
  title="Dashboard"
  subtitle="Overview of your activity"
  loading={false}
  error={null}
  empty={false}
>
  <p class="text-gray-600">Main page content goes here.</p>
</PageShell>

Event Log

Interact with the component to see events

Accessibility

Manages page title via <svelte:head>. Semantic structure for content states.