Container

Responsive container component with max-width constraints.

Container

Container is a layout component that centers content with a max-width constraint.

Import

import { Container } from 'radix-native-ui';

Usage

import { Container, Text } from 'radix-native-ui';

<Container size={3}>
  <Text>Centered content with max-width</Text>
</Container>

Props

Container Sizes

Size	Max Width
1	480px
2	640px
3	768px (default)
4	1024px

Examples

Basic Container

<Container>
  <Text>Content is centered with default max-width</Text>
</Container>

Narrow Container

<Container size={1}>
  <Text>Narrow content area</Text>
</Container>

Wide Container

<Container size={4}>
  <Text>Wide content area</Text>
</Container>

Page Layout

<Container size={3}>
  <Flex direction="column" gap={4}>
    <Heading size={5}>Page Title</Heading>
    <Text>Page content goes here...</Text>
    <Card>
      <Text>Card content</Text>
    </Card>
  </Flex>
</Container>

Responsive Container

<Container size={3} responsive>
  <Text>Container with responsive padding</Text>
</Container>

Related

• Box - Primitive container
• Flex - Flexbox layout component
• Grid - Grid layout component