Starting-point page frames built on the App Shell. This is the List template: page header with breadcrumb, title and actions, then bulk actions, a selectable table and pagination.
Loading demo: page-template-default
npx sdaia-ui@latest add page-template
import { Breadcrumb } from '@/components/ui/Breadcrumb';
import { Button } from '@/components/ui/Button';
import { PageTemplate } from '@/components/ui/PageTemplate';1<PageTemplate2type="list"3shell={shell}4breadcrumb={<Breadcrumb items={[{ label: "Home", href: "/" }, { label: "Users" }]} />}5title="Users"6actions={<Button variant="primary">Add user</Button>}7>8{/* table, filters, pagination */}9</PageTemplate>
list, detail, form, settings, dashboard share the app page frame: page header (breadcrumb, <h1> title, status, actions) above the content. They differ in the components you compose inside.sign-in renders a centred card in its own <main>, without the App Shell.error-403, error-404, error-500 render a centred message; code defaults to the type's number.shell to wrap the page in an App Shell. Omit it when the page already sits inside one, for example an App Shell placed in a shared layout.Title with a status badge, page actions, and the 360 px `aside` beside the content on desktop (stacked under it below 1280 px).
Loading demo: page-template-detail
An error summary after a failed submit (each item links to its field), titled form sections and the form actions.
Loading demo: page-template-form
A primary action in the page header and titled sections of switches and fields.
Loading demo: page-template-settings
Metrics, a chart and recent activity.
Loading demo: page-template-dashboard
A centred card on the canvas, without the App Shell: logo, title, the form and a help line.
Loading demo: page-template-sign-in
Access denied. The error pages use the App Shell without the side navigation.
Loading demo: page-template-error-403
Page not found.
Loading demo: page-template-error-404
Server error, with a retry action and the error reference.
Loading demo: page-template-error-500
The List template in Arabic: the side navigation moves to the right and every row mirrors.
Loading demo: page-template-rtl
aside sits beside the content from 1280 px and below it under that, so the content is never squeezed.title is the page's single <h1>; section titles in your content should start at <h2>.header, nav, main); the sign-in frame is its own <main>.role="alert"); each item links to its field and moves focus there.Prop | Type | Default | Required |
|---|---|---|---|
type | "list" | "detail" | "form" | "settings" | "dashboard" | "sign-in" | "error-403" | "error-404" | "error-500" | "list" | optional |
shell | PageTemplateShellProps | — |
title | ReactNode | — | optional |
description | ReactNode | — | optional |
breadcrumb | ReactNode | — | optional |
status | ReactNode | — | optional |
actions | ReactNode | — | optional |
aside | ReactNode | — | optional |
logo | ReactNode | — | optional |
code | ReactNode | type code | optional |
footer | ReactNode | — | optional |
children | ReactNode | — | optional |
dir | "ltr" | "rtl" | — | optional |
