Box

Primitive container component with comprehensive styling props.

Box

Box is a primitive container component that provides access to all styling props. It’s the building block for creating custom components and layouts.

Import

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

Usage

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

<Box padding={8} backgroundColor="gray">
  <Text>Content inside a box</Text>
</Box>

Props

Examples

Basic Container

<Box padding={8} backgroundColor="gray">
  <Text>Simple container</Text>
</Box>

Card-like Box

<Box
  padding={8}
  backgroundColor="gray"
  radius="medium"
>
  <Text>Card content</Text>
</Box>

Flex Container

<Box display="flex" flexDirection="row" justifyContent="space-between">
  <Text>Left</Text>
  <Text>Right</Text>
</Box>

With Border

<Box
  padding={8}
  borderWidth={1}
  borderColor="gray"
  radius="small"
>
  <Text>Bordered box</Text>
</Box>

Absolute Positioning

<Box position="relative" height={200}>
  <Box
    position="absolute"
    top={10}
    right={10}
    padding={4}
    backgroundColor="gray"
    radius="small"
  >
    <Text>Positioned box</Text>
  </Box>
</Box>

With Shadow (Android)

<Box
  padding={8}
  backgroundColor="gray"
  radius="large"
  elevation={2}
>
  <Text>Box with shadow</Text>
</Box>

Related

• Flex - Flexbox layout component
• Container - Responsive container
• Card - Styled card component