Page regions

Gives a page the layout of a Lightning page template: a header, then regions. The template sets the columns and where they stack.

Account

Edge Communications

Details

The page layout's fields, in their sections.

Contacts, Opportunities and Cases.

Activity

Upcoming and past tasks, events and calls.

Installation

pnpm dlx shadcn@latest add @wisty/page-regions

The CLI installs the Radix or Base UI file to match your project.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with Page regionsBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

To lay a page out the way Lightning's page templates do: a header, then one, two or three regions of cards and lists. layout names the template.
For a record page, an app page or a home page in an app, before its sections go in. For a record page with its sections already in place, start from Record page.
When every page should agree on the sidebar's width, the gap between regions and where they stack.

Don't use it

For the sections themselves. Put Record header, Related list, Record detail, Activity timeline or KPI row in a region.
For a whole record page. Record page is built on these parts. Copy it and change its lines.
For columns inside a card or a form. Use a grid on the card's content, or Field group's layout.

Usage

Page
├── (a header: Page header, Record header or List view header)
├── (a path or a subheader)
└── PageRegions
    ├── PageRegion
    └── PageRegion

import { Page, PageRegion, PageRegions } from "@/components/wisty/page-regions"

<Page>
  <RecordHeader
    icon="standard:account"
    objectLabel="Account"
    name="Edge Communications"
  />
  <PageRegions layout="right-sidebar">
    <PageRegion>
      <Card>…</Card>
    </PageRegion>
    <PageRegion>
      <Card>…</Card>
    </PageRegion>
  </PageRegions>
</Page>

Whatever spans the page, a header, a path or a subheader, is a child of Page before PageRegions. The regions are PageRegions' children in order: for right-sidebar the sidebar is the second region, for left-sidebar the first, and three takes three. Each PageRegion stacks what's put in it.

Examples

Header and Left Sidebar

The sidebar before the main region, with `layout="left-sidebar"`.

Activity

Upcoming and past tasks, events and calls.

Details

The page layout's fields, in their sections.

Contacts, Opportunities and Cases.

Header and Two Equal Regions

Two regions of the same width, with `layout="two-equal"`, as a home page's Today's Tasks and Today's Events.

Today's Tasks

Three tasks are due today.

Today's Events

Installation planning meeting at 10:00 AM.

Header and Three Regions

Three regions of the same width, with `layout="three"`, stacked one under the other below 64rem.

Key Deals

Edge Emergency Generator closes in November.

Recent Records

Edge Communications, Rose Gonzalez, 00001026.

Today's Tasks

Three tasks are due today.

Header and One Region

One region the full width of the page, with `layout="one"`, for cards stacked one under the other.

Quarterly Performance

$185K closed of a $250K goal, with $75K open.

Assistant

Two opportunities have no activity in 30 days.

API reference

Part	Built on	Description
`Page`	`<div>` (opens in a new tab)	A page laid out as a Lightning page template: a header, then its regions.
`PageRegions`	`<div>` (opens in a new tab)
`PageRegion`	`<div>` (opens in a new tab)

`PageRegions`

Prop	Type	Default
`layout`	`"one" \| "right-sidebar" \| "left-sidebar" \| "two-equal" \| "three"`	`"right-sidebar"`

SLDS mapping

Lightning's page templates are the runtime's, not markup, so SLDS draws their regions with its grid. Page is the template's container, PageRegions is slds-grid slds-wrap, and each PageRegion is an slds-col with slds-size_1-of-1 and the responsive size the table lists for its layout. The table maps every layout.

Known gaps:

SLDS's slds-gutters put 24px between columns. The regions sit 16px apart, the space between stacked cards.
Subheader and grouped-header templates have no layout: a subheader is one more child of Page under the header, and a grouped header is the page's own header.

Prop	Value	SLDS	Notes
`Page`	`(part)` (added)	`slds-template_default`	The page: the header, anything under it and the regions, in a column 1rem apart.
`PageRegions layout`	`right-sidebar (default)` (added)	`slds-grid slds-wrap, slds-large-size_2-of-3 then slds-large-size_1-of-3`	Header and Right Sidebar: the main region two thirds and the sidebar one third from 54rem, never under 22rem.
`PageRegions layout`	`left-sidebar` (added)	`slds-grid slds-wrap, slds-large-size_1-of-3 then slds-large-size_2-of-3`	Header and Left Sidebar: the same columns with the sidebar first.
`PageRegions layout`	`two-equal` (added)	`slds-grid slds-wrap, slds-medium-size_1-of-2`	Header and Two Equal Regions: two halves from 48rem.
`PageRegions layout`	`three` (added)	`slds-grid slds-wrap, slds-large-size_1-of-3`	Header and Three Regions: three thirds from 64rem.
`PageRegions layout`	`one` (added)	`slds-grid, slds-size_1-of-1`	Header and One Region: one column at every width.
`PageRegion`	`(part)` (added)	`slds-col slds-size_1-of-1`	One region. Its cards and lists stack 1rem apart, and it fills its column.

Accessibility

Page is a div, not main. The app's layout provides the main landmark, so a page sits inside it.
The parts have no roles or names. Landmarks and headings come from what's in the regions: a related list is a named region, a header's title is the h1.

Responsive behavior

The regions follow the page's own width, not the window's: a page in a split view stacks sooner than one that fills the window.
right-sidebar and left-sidebar take two columns from 54rem, the main region two thirds and the sidebar one third, never narrower than 22rem. Below 54rem the regions stack in their order.
two-equal takes two columns from 48rem, three three columns from 64rem; below that each stacks in order. one is one column at every width.
What's in a region sizes to its column: a related list shows tiles once its column is narrower than 30rem.

Rules

Put PageRegions inside Page. The columns come from the page's width, and outside Page the regions stay stacked.
Give PageRegions as many regions as its layout has: two for a sidebar layout or two-equal, three for three, one for one. A region past that starts a new row.
Keep the sidebar's content to what fits 22rem: a KPI row two by two, tiles, a timeline. A table in a sidebar shows tiles.
Never pass asChild or render.