Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Container

Constrains the maximum width of page content.

View sourceReport an issue
<Box style={{ background: 'var(--gray-a2)', borderRadius: 'var(--radius-3)' }}>

  <Container size="1">

    <DecorativeBox>

      <Box py="9" />

    </DecorativeBox>

  </Container>

</Box>

API Reference

This component is based on the div element and supports common margin props.

PropTypeDefault
size
Responsive<"1" | "2" | "3" | "4">
"4"
display
Responsive<"none" | "block">
No default value

Container sizes use the following max-width values, which may be customized if needed.

Size CSS token Width
size="1" --container-1 448px
size="2" --container-2 688px
size="3" --container-3 880px
size="4" --container-4 1136px

The following props are shared between Box, Flex, Grid, Container and Section layout components.

PropTypeDefault
p
enum
No default value
px
enum
No default value
py
enum
No default value
pt
enum
No default value
pr
enum
No default value
pb
enum
No default value
pl
enum
No default value
position
Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky">
No default value
inset
Responsive<"auto" | "0" | "50%" | "100%">
No default value
top
Responsive<"auto" | "0" | "50%" | "100%">
No default value
right
Responsive<"auto" | "0" | "50%" | "100%">
No default value
bottom
Responsive<"auto" | "0" | "50%" | "100%">
No default value
left
Responsive<"auto" | "0" | "50%" | "100%">
No default value
width
enum
No default value
height
enum
No default value
shrink
Responsive<"0" | "1">
No default value
grow
Responsive<"0" | "1">
No default value
PreviousGrid
NextSection
Edit this page on GitHub.