Layout components
The shells the admin renders inside. They come in two tiers: the app shells frame the whole window (sidebar, header, login screen), and the view shells frame one screen inside it (a list, a detail, a form).
SchemaLayout — the default passed to SchemaAdmin — is built
from AdminDashboardLayout, which is DashboardLayout wired to React Admin.
App shells
| Component | Use it for |
|---|---|
| DashboardLayout | The full admin shell: sidebar, header, search, breadcrumbs, settings panel, footer |
| AuthLayout | Login, password reset and other pre-authentication screens |
| SimpleLayout | A standalone page outside the admin shell |
| DashboardContent | The padded, width-capped content container inside the dashboard shell |
View shells
| Component | Use it for |
|---|---|
| ViewContent | The frame every view renders into — title, actions, breadcrumbs, bottom bar |
| ShowShell | A read-only detail screen built by hand |
| EditShell and CreateShell | A form screen built by hand |
| FormShell | The form context and save toolbar the two form shells wrap |
| ListShell | A list with the generated filter/toolbar arrangement |
| Property layouts | Label + value rows, the way a generated detail lays fields out |
How the three tiers stack
A generated screen is three layers deep, and each one can be used on its own:
SchemaShow → ShowShell → ViewContent
(reads the schema) (owns the RA controller) (pure chrome)
Only the top layer knows about schemas. The two admin-layer shells take plain React Admin values, which is what makes them usable in an app that has no Habarico backend at all — the same path the library's own Storybook pages take.
BaseLayout, FormLayout, ShowLayout, ListView and AdminPageContent no longer exist. They
were replaced by the shells above: FormShell / PropertyFormLayout, ShowShell /
PropertyShowLayout, ListShell, and DashboardContent.
See also
- Box components — the containers rendered inside these shells
- SchemaAdmin —
LayoutComponentandcontentMaxWidth - View components — the generated views these wrap
- Breadcrumbs — injecting a trail from a custom page
- Forms and layout — arranging a form with boxes