> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Box Component

> Flexible container component with comprehensive styling options

# Box

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

## Props

| Prop         | Type               | Default | Description                                                  |
| ------------ | ------------------ | ------- | ------------------------------------------------------------ |
| `padding`    | `string \| number` | -       | Padding size: `"sm"`, `"md"`, `"lg"`, `"xl"` or number       |
| `margin`     | `string \| number` | -       | Margin size: `"sm"`, `"md"`, `"lg"`, `"xl"` or number        |
| `background` | `string`           | -       | Background color or gradient                                 |
| `radius`     | `string \| number` | -       | Border radius: `"sm"`, `"md"`, `"lg"` or number              |
| `border`     | `string`           | -       | Border style                                                 |
| `shadow`     | `string`           | -       | Shadow size: `"sm"`, `"md"`, `"lg"`, `"xl"`                  |
| `width`      | `number \| string` | -       | Width in pixels or percentage                                |
| `height`     | `number \| string` | -       | Height in pixels or percentage                               |
| `flex`       | `number`           | -       | Flex grow factor                                             |
| `align`      | `string`           | -       | Align items: `"start"`, `"center"`, `"end"`                  |
| `justify`    | `string`           | -       | Justify content: `"start"`, `"center"`, `"end"`, `"between"` |
| `gap`        | `string \| number` | -       | Gap between children                                         |

## Examples

### Basic Container

```jsx theme={null}
<Box padding="lg" background="#f5f5f5">
  <Text value="Content inside a box" />
</Box>
```

### With Gradient Background

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

### Flex Layout

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

### With Shadow and Border

```jsx theme={null}
<Box 
  padding="md" 
  radius="md" 
  shadow="lg"
  border="1px solid #e0e0e0"
>
  <Text value="Elevated box with border" />
</Box>
```

## Common Patterns

### Card-like Container

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

### Centered Content

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