Skip to component content
Layout011 / 155

InsetContainer

Constrain a region and give its content breathing room.

Example

A centered reading column with room for device insets.

A fluid container with compact spacing.

Source
InsetContainer.tsxtsx
import { InsetContainer, Surface, Text, VStack } from "@/ohmygui";

export default function Example() {
  return (
    <VStack align="stretch" gap="sm">
      <InsetContainer as="section" aria-label="Reading column" maxWidth={360} padding="lg" safeArea>
        <Surface tone="paper" padding="md">
          <Text as="p">A centered reading column with room for device insets.</Text>
        </Surface>
      </InsetContainer>
      <InsetContainer as="section" aria-label="Full-width content" maxWidth="100%" padding="sm">
        <Surface appearance="outlined" padding="sm">
          <Text as="p">A fluid container with compact spacing.</Text>
        </Surface>
      </InsetContainer>
    </VStack>
  );
}