Container

Container is a client component that renders a Box as a section and applies the theme's container entry before any props you pass. Use it to wrap page content so it picks up the theme's width and padding. It reads the theme through styled-components' ThemeContext.

Import#

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

Usage#

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

export default function SettingsPage() {
  return (
    <Container>
      <Heading title="Settings" subtitle="Manage your workspace preferences." />
      <Box skin="surface" shape="rounded" p="m">
        <Text>General settings go here.</Text>
      </Box>
    </Container>
  );
}

Examples#

Narrow column#

Override the theme width and padding with maxWidth, mx and p, for example for a form column.

Different element#

Pass as to render another element, such as an article.

API#

Container#

All other props are BoxProps and are spread onto the root Box after the theme defaults, so they override them.

Notes#

• Element order of precedence is as="section", then theme.container, then your props. The default light theme sets container.as to "main", so under that theme the component renders a main element unless you pass as. The default dark theme does not set as, so it renders a section.
• The light theme supplies maxWidth, mx="auto" and responsive padding; the dark theme supplies a background, border, shadow, overflow="auto" and padding. Visual output therefore depends on the active theme.
• Must render inside a styled-components ThemeProvider (for example via DesignSystemProvider) for the theme defaults to apply. Without a theme it renders a plain section.
• Avoid nesting multiple Container instances when the theme sets as="main", as a document should contain only one visible main element.