Loading navigation…
User
API and Development
CrudPage and its slot components are exported from @prepared911/ui-blocks. The root partitions direct children into header, alert, toolbar, and body regions so the visual order stays header → alert → toolbar → body even when JSX order differs.
CrudPageHeader delegates to PageHeader with actions omitted—put primary CTAs on CrudPageToolbar. CrudPageToolbar is DataTableToolbar with a layout class. When any child is CrudPageBody, the default inner body wrapper is skipped so you do not double-wrap flex containers.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Slot children and/or body content. |
variant | CrudPageVariant | Default | Default or Card surface. |
gap | Gap | 2 | Vertical gap between major regions (ignored when an explicit CrudPageBody supplies its own gap). |
padding | Spacing | — | Optional padding on the root. |
className | string | — | Root class name. |
Same as PageHeaderProps from @prepared911/ui-blocks except actions is omitted. See Page header API.
Forwards DataTableToolbarProps from @prepared911/ui-data-table and React.forwardRef FilterRef. See Data table API.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Body content (table, split panes, etc.). |
flexDirection | FlexDirection | Column | Layout direction for the body region. |
gap | Gap | — | Gap between body children. |
className | string | — | Body wrapper class name. |
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Typically Callout or Banner from @prepared911/ui-core. |
className | string | — | Wrapper class name. |
| Value | Use when |
|---|---|
CrudPageVariant.Default | The page is the main route surface and inherits app chrome. |
CrudPageVariant.Card | The layout sits inside another surface (modal, drawer, dashboard tile) and should read as a card. |
Previews use a bounded Box height so flex layout matches real routes.
On this page