Skip to main content

​
Box

The Box component is a fundamental layout primitive that provides a flexible container with full control over spacing, sizing, and visual styling.

​
Props

PropTypeDefaultDescription
paddingstring | number-Padding size: "sm", "md", "lg", "xl" or number
marginstring | number-Margin size: "sm", "md", "lg", "xl" or number
backgroundstring-Background color or gradient
radiusstring | number-Border radius: "sm", "md", "lg" or number
borderstring-Border style
shadowstring-Shadow size: "sm", "md", "lg", "xl"
widthnumber | string-Width in pixels or percentage
heightnumber | string-Height in pixels or percentage
flexnumber-Flex grow factor
alignstring-Align items: "start", "center", "end"
justifystring-Justify content: "start", "center", "end", "between"
gapstring | number-Gap between children

​
Examples

​
Basic Container

<Box padding="lg" background="#f5f5f5">
  <Text value="Content inside a box" />
</Box>

​
With Gradient Background

<Box 
  padding="xl" 
  background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
  radius="lg"
>
  <Title level={2} value="Gradient Box" color="white" />
</Box>

​
Flex Layout

<Box flex={1} align="center" justify="between" gap="md">
  <Text value="Left" />
  <Text value="Right" />
</Box>

​
With Shadow and Border

<Box 
  padding="md" 
  radius="md" 
  shadow="lg"
  border="1px solid #e0e0e0"
>
  <Text value="Elevated box with border" />
</Box>

​
Common Patterns

​
Card-like Container

<Box padding="lg" radius="lg" shadow="md" background="white">
  <Title level={3} value="Card Title" />
  <Text value="Card content goes here" />
</Box>

​
Centered Content

<Box flex={1} align="center" justify="center">
  <Text value="Centered content" />
</Box>