Main

Render the outermost page wrapper using the theme's main styles.

Main is a client component ("use client") that renders a Box with the theme's main entry applied, followed by any props you pass. Use it as the outermost page wrapper. It reads the theme through styled-components' ThemeContext.

Dashboard

Welcome back. You have 3 reports ready to review.

Import#

typescript

import { Main } from "@reactberry/system/blocks";

Usage#

typescript

import { Container, Heading, Main } from "@reactberry/system/blocks";
import { Text } from "@reactberry/system/elements";

export default function Page() {
  return (
    <Main>
      <Container>
        <Heading title="Dashboard" />
        <Text as="p">Welcome back.</Text>
      </Container>
    </Main>
  );
}

Examples#

Landmark and custom background#

Pass as="main" for the main landmark, and override theme defaults such as bg and minHeight with props.

Settings

Manage your profile, notifications and billing.

API#

Main#

Prop	Type	Default	Description
`children*`	`ReactNode`	—	Content rendered inside the wrapper.

All other props are BoxProps and are spread onto the Box after the theme defaults, so they override them. The prop type also declares an optional props key (props?: any); it has no special handling and is forwarded to the Box like any other prop.

Accessibility#

Main renders a div by default. It does not set as="main"; pass as="main" yourself if you need the landmark, or rely on Container, which renders main under the default light theme.

Notes#

The default light theme sets width="100%", minHeight="100vh" and a blue-tinted background. The default dark theme sets a neutral background, light text colour, minHeight="100dvh" and display="grid".
Must render inside a styled-components ThemeProvider for the theme defaults to apply.