Page

Semantic responsive container for page-level layouts.

import { Page } from 'ui-lab-components/page';
PaddingNone
Region GapMedium
import { Flex } from 'ui-lab-components/flex';
import { Page } from 'ui-lab-components/page';
 
export default function Example() {
  return (
    <Page max-width="100%" padding="none" gap="md">
      <Page.Header divided>
        <Flex gap={4} h={10} align-center justify-between>
          <div className="h-6 w-33 shrink-0 rounded-sm bg-background-800" />
          <Flex gap={2} w="auto">
            <div className="h-6 w-12 shrink-0 rounded-sm bg-background-800" />
            <div className="h-6 w-16 shrink-0 rounded-sm bg-background-800" />
          </Flex>
        </Flex>
      </Page.Header>
 
      <Page.Body className="block">
        <section className="grid gap-2.5">
          <div className="h-26 w-full rounded-sm bg-background-800" />
          <div className="grid grid-cols-3 gap-2.5">
            <div className="h-28 w-full rounded-sm bg-background-800" />
            <div className="h-28 w-full rounded-sm bg-background-800" />
            <div className="h-28 w-full rounded-sm bg-background-800" />
          </div>
        </section>
      </Page.Body>
 
      <Page.Footer divided>
        <Flex gap={3} h={8} align-center justify-between>
          <div className="h-5 w-22 shrink-0 rounded-sm bg-background-800" />
          <div className="h-5 w-14 shrink-0 rounded-sm bg-background-800" />
        </Flex>
      </Page.Footer>
    </Page>
  );
}

page/01-dashboard

A dashboard page with divided header and footer regions and a grid of summary panels.

Loading interactive preview
"use client";
 
import type { CSSProperties } from 'react';
import { Flex } from 'ui-lab-components/flex';
import { Frame } from 'ui-lab-components/frame';
import { Page } from 'ui-lab-components/page';
 
const BASE_CELL_STYLE = {
  '--fill': 'var(--background-900)',
  '--stroke-color': 'var(--background-600)',
} as CSSProperties;
 
function FrameCell({ className, style }: { className?: string; style?: CSSProperties }) {
  return (
    <Frame pathStroke="dashed" className={className} style={{ ...BASE_CELL_STYLE, ...style }}>
      <div className="size-full" />
    </Frame>
  );
}
 
export default function Example() {
  return (
    <Page max-width="100%" padding="none" gap="md">
      <Page.Header divided>
        <Flex gap={4} h={10} align-center justify-between>
          <FrameCell className="shrink-0" style={{ width: 132, height: 24 }} />
          <Flex gap={2} w="auto" className="shrink-0">
            <FrameCell className="shrink-0" style={{ width: 48, height: 24 }} />
            <FrameCell className="shrink-0" style={{ width: 64, height: 24 }} />
          </Flex>
        </Flex>
      </Page.Header>
 
      <Page.Body className="block">
        <section className="grid min-w-0 gap-2.5">
          <FrameCell className="w-full min-w-0" style={{ height: 104 }} />
          <div className="grid min-w-0 grid-cols-3 gap-2.5">
            <FrameCell className="w-full min-w-0" style={{ height: 112 }} />
            <FrameCell className="w-full min-w-0" style={{ height: 112 }} />
            <FrameCell className="w-full min-w-0" style={{ height: 112 }} />
          </div>
        </section>
      </Page.Body>
 
      <Page.Footer divided>
        <Flex gap={3} h={8} align-center justify-between>
          <FrameCell className="shrink-0" style={{ width: 88, height: 20 }} />
          <FrameCell className="shrink-0" style={{ width: 56, height: 20 }} />
        </Flex>
      </Page.Footer>
    </Page>
  );
}