Shade page templates

Shade — page templates

When building a new admin page, the first question is what page type is this? — then reach for the matching pattern instead of inventing chrome.

Page type taxonomy

List page

Browsing or scanning a collection of items.

• Live examples: Members, Tags, Comments, Automations, ActivityPub.
• Chrome shape: PageHeader (title + count + search/filter/actions) → table or list → empty state → pagination.
• Pattern: ListPage (composes PageHeader). Heavy filter UI uses Filters.

Detail page

Working with a single item — viewing, editing, or both.

• Live examples: Post editor.
• Chrome shape: PageHeader with breadcrumb + title + meta, a primary action area, and a content area dedicated to the item.
• Pattern: not built this milestone. Use PageHeader directly and lay out the body yourself.

Settings

Out of scope for the current page-template milestone. Don't force a settings page into ListPage or PageHeader.

Workflow / multi-step flows

No standard yet — too few examples. Don't standardise prematurely.

Canonical list page skeleton

import {ListPage} from '@tryghost/shade/page-templates';
import {PageHeader, ViewBar, FilterBar} from '@tryghost/shade/patterns';
import {Button, EmptyIndicator, Table} from '@tryghost/shade/components';

<ListPage>
  <ListPage.Header>
    {/* sticky={false} — ListPage.Header owns stickiness and blur */}
    <PageHeader sticky={false} blurredBackground={false}>
      <PageHeader.Left>
        <PageHeader.Title>
          Members<PageHeader.Count>{count}</PageHeader.Count>
        </PageHeader.Title>
      </PageHeader.Left>
      <PageHeader.Actions>
        <PageHeader.ActionGroup>
          <Button>Add member</Button>
        </PageHeader.ActionGroup>
      </PageHeader.Actions>
    </PageHeader>
    <ViewBar>{/* optional */}</ViewBar>
    <FilterBar>{/* optional — auto-collapses when empty */}</FilterBar>
  </ListPage.Header>
  <ListPage.Body>
    {items.length === 0 ? <EmptyIndicator title='No members yet' /> : <Table>...</Table>}
  </ListPage.Body>
</ListPage>