Page types
Five shapes cover every screen in this product. Choosing one is the first decision on a new page, and it is not a free choice.
The five
| Type | Built with | Use when |
|---|---|---|
| 1. Data table | RecordView and a fields array | Any list of records |
| 2. Record form | The same fields, as a slide-over or a page | Create, edit or view one record |
| 3. Dashboard | A stat card grid and bordered sections, composed by hand | An overview or landing screen |
| 4. Settings | One card of sections and a fixed Save footer | A form with a Save button, not a list |
| 5. Board | A horizontal row of fixed-width columns | Stage or status pipelines |
Why it is not a free choice
Types 1 and 2 are configuration: describe the fields and the screen appears. A sixth shape is code somebody maintains, and it is the first screen that stops following the theme when the theme changes. A requirement that seems to need one is almost always type 1 with a different field list.
The frame types 3 to 5 share
the standard page frame
<div className="flex h-full flex-col">
<PageChrome title="Dashboard" /> {/* breadcrumbs and actions */}
<div className={PAGE_SCROLL}> {/* the one scroll owner */}
<div className="p-4 md:p-6">…</div>
</div>
</div>⚠️ One scroll owner, and it is not the page
The shell is exactly the viewport and
PAGE_SCROLL is the single element that scrolls. A second scrolling container inside it gives a reader two scrollbars and no way to predict which one moves.Record form: two variants, and no third
- Slide-over, the default. Add and edit open beside the table, so the list stays visible. Nothing to configure.
- Full page, with
formMode="page": its own URL, a breadcrumb bar, an info panel and a fixed footer. For long forms, or when the flow needs to be linkable.
Your download has both side by side: /departments is the default and /organizations is the same screen one prop apart.