App Page

#Installation & usage

Put each page of your app in AppPage, inside your frame's content area. Build an app frame puts the sidebar, top bar, account menu and search around it. The in-app screens use it, so a page of your own sits beside them with the same header and the same edges.

import { AppPage, Button } from '@youj/react'

export function Invoices() {
  return (
    <AppPage title="Invoices" description="Everything you've billed this year." actions={<Button>New invoice</Button>} width="fill">
      {/* your sections */}
    </AppPage>
  )
}

width sets how far the body runs. page (the default) stops at 1280px at 100% scale and centers, so a wide screen gets margins. fill takes the whole width, for a dashboard, a table, a board or a canvas. readable stops at 1024px and centers, for a page that is one form, such as settings. A page of tables, cards or lists fills; cap a field's own width rather than the page's.

The page is a container, so what's inside lays out by the page's width rather than the window's: use @3xl: and @6xl: in your sections. The gutter is 16px, 24px from a 48rem page and 32px from 72rem; the frame's top bars (see Build an app frame) follow the same gutter.

#Description

#Code