> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

> Arrange content with Box, stacks, groups and separators.

# Layout primitives

All layout components accept shared sprinkles props such as `p`, `gap`, `bg`, `borderRadius`, `width` and `alignItems`.

## Box

`Box` is the foundation primitive. It renders a `div` by default and supports `as` for a different element.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=layout-1)

> [tab] Code
>
> ```tsx theme={null}
> <Box as="section" p="large" bg="card" borderRadius="large">
>   Content
> </Box>
> ```

## Stacks

`YStack` is a vertical flex container and `XStack` is a horizontal flex container.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=layout-2)

> [tab] Code
>
> ```tsx theme={null}
> <YStack gap="large" p="large">
>   <Heading level={2}>Account settings</Heading>
>   <XStack gap="small" alignItems="center" justifyContent="space-between">
>     <Text>Email alerts</Text>
>     <Switch defaultChecked />
>   </XStack>
> </YStack>
> ```

## XGroup

Use `XGroup` for connected horizontal controls. Its children share borders and outer corner radii.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=layout-3)

> [tab] Code
>
> ```tsx theme={null}
> <XGroup>
>   <Button variant="outline">Day</Button>
>   <Button variant="outline">Week</Button>
>   <Button variant="outline">Month</Button>
> </XGroup>
> ```

## Separator

`Separator` renders a horizontal rule by default. Set `orientation="vertical"` for an inline divider. Use `decorative` when it is purely visual.

> [tab] Preview
>
> [Rendered Silva UI preview](https://black-silva.github.io/silva-ui/previews/?example=layout-4)

> [tab] Code
>
> ```tsx theme={null}
> <XStack gap="medium" alignItems="center">
>   <Text>Overview</Text>
>   <Separator orientation="vertical" decorative height="full" />
>   <Text color="muted">Last updated today</Text>
> </XStack>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.