Container - Radix Ui

jsx

<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.

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

<Table.Root variant="surface" my="5"> <Table.Header> <Table.Row> <Table.ColumnHeaderCell>Size</Table.ColumnHeaderCell> <Table.ColumnHeaderCell>CSS variable</Table.ColumnHeaderCell> <Table.ColumnHeaderCell>Width</Table.ColumnHeaderCell> </Table.Row> </Table.Header>

<Table.Body>
	<Table.Row>
		<Table.RowHeaderCell>`size="1"`</Table.RowHeaderCell>
		<Table.Cell><Code color="gray">--container-1</Code></Table.Cell>
		<Table.Cell><Code color="gray">448px</Code></Table.Cell>
	</Table.Row>

	<Table.Row>
		<Table.RowHeaderCell>`size="2"`</Table.RowHeaderCell>
		<Table.Cell><Code color="gray">--container-2</Code></Table.Cell>
		<Table.Cell><Code color="gray">688px</Code></Table.Cell>
	</Table.Row>

	<Table.Row>
		<Table.RowHeaderCell>`size="3"`</Table.RowHeaderCell>
		<Table.Cell><Code color="gray">--container-3</Code></Table.Cell>
		<Table.Cell><Code color="gray">880px</Code></Table.Cell>
	</Table.Row>

	<Table.Row>
		<Table.RowHeaderCell>`size="4"`</Table.RowHeaderCell>
		<Table.Cell><Code color="gray">--container-4</Code></Table.Cell>
		<Table.Cell><Code color="gray">1136px</Code></Table.Cell>
	</Table.Row>

</Table.Body>

</Table.Root>

The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.