Page
The frame of an app page: header and content share one column, a line comes as the content scrolls, and on a phone the header becomes a floating glass bar.
import { Page } from "@plexui/ui/components/Page";Examples
Overview
Orders
Widths
Settings
Heading
Menu
Saved a minute ago
Fill
Orders
Phone
Under 768px the header is one row of 44px over the page. It floats: at rest nothing shows, and content scrolled under it turns it to glass with a hairline. The content keeps its place through --page-top, the top inset and the bar together, also for anything else that has to start below the bar, such as a banner.
Keep the row to a title and one group of actions. The bar has no room for a second row, so anything set under Page.Bar, such as a search field, belongs at the top of Page.Content on a phone. useBreakpoint("md") tells which one to render. The first column of the bar stays free for the menu button of a sidebar.
Use it inside SidebarInset for a whole app, see the app sidebar.
API
Page
| Prop | Type | Default | Description |
|---|---|---|---|
width | "full" | "wide" | "column" | "full" | Column that header and content share: edge to edge, 1280px or 768px, centred |
className | string | — | Applied to the root element |
All other <div> attributes are forwarded to the root.
Page.Header
| Prop | Type | Default | Description |
|---|---|---|---|
divider | boolean | true | Shows the line, and the glass on a phone, once the content has scrolled under the header |
className | string | — | Applied to the band |
Children stand in the shared column. All other <div> attributes are forwarded to the band.
Page.Content
| Prop | Type | Default | Description |
|---|---|---|---|
fill | boolean | false | The content fills the page and scrolls inside itself, from 768px up |
onScroll | UIEventHandler | — | Called on every scroll, after the page has read the position |
className | string | — | Applied to the element that scrolls |
Children stand in the shared column. All other <div> attributes and ref go to the element that scrolls.
Compound parts
| Part | Element | Purpose |
|---|---|---|
Page.Bar | <div> | Row of the title and the actions |
Page.Heading | <div> | Title with what stands beside it |
Page.Title | <h1> | Page heading |
Page.Subtitle | <p> | Status of the page |
Page.Actions | <div> | Buttons on the trailing side of the bar |
Styling
Page reads these component tokens. Override them at any scope to restyle it:
--page-background: background (defaultvar(--color-surface))--page-bar-gap: gap between title and actions (default24px)--page-bar-height: bar height (default36px)--page-bar-height-phone: bar height on a phone (default44px)--page-bar-line: hairline of the glass bar (defaultlight-dark(rgb(0 0 0 / 10%), var(--color-border)))--page-bar-veil: fill of the glass bar (defaultlight-dark(rgb(255 255 255 / 72%), rgb(0 0 0 / 60%)))--page-content-padding-bottom: bottom of the content (default48px)--page-content-padding-top: top of the content on a phone (default16px)--page-gutter: side gutter on a phone (default16px)--page-gutter-wide: side gutter and top of the content from 768px up (default24px)--page-header-padding-bottom: gap between the bar and the line (default12px)--page-header-padding-top: top of the header (default12px)--page-title-font-size: title font size (default20px)--page-title-line-height: title line height (default26px)--page-width: width of the column, any value--page-width-column:columnwidth (default768px)--page-width-wide:widewidth (default1280px)