Box

Box is the fundamental layout container component for building flexbox layouts with theme token shortcuts.

Usage

BoxExample.tsx

import { Box, Text } from '@masumdev/rn-ui';

export function BoxExample() {
  return (
    <Box row center gap="md" bg="surface" style={{ padding: 16, borderRadius: 12 }}>
      <Box flex={1}>
        <Text variant="h3">Box Container</Text>
        <Text color="textMuted">Flex layout primitive styled with theme tokens.</Text>
      </Box>
    </Box>
  );
}

Props API

Prop	Type	Default	Description
children	ReactNode	—	Container children.
row	boolean	false	Sets flex direction to row.
center	boolean	false	Centers items horizontally and vertically.
gap	'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'	—	Spacing gap between flex children.
bg	ThemeColorName	—	Background color token from active theme.
flex	number	—	Flex grow/shrink value.