The Container component provides a styled wrapper with automatic depth tracking and theming. Nested containers automatically adjust their background and border colors based on depth, creating visual hierarchy.
This is content inside a container
<Container> <Text>This is content inside a container</Text> </Container>
Containers automatically track depth. Each nested container increases the depth, resulting in progressively darker backgrounds.
Depth 1
Depth 2
Depth 3
Depth 4
<Container>
<Text>Depth 1</Text>
<Container>
<Text>Depth 2</Text>
<Container>
<Text>Depth 3</Text>
<Container>
<Text>Depth 4</Text>
</Container>
</Container>
</Container>
</Container>Use the inverse prop to decrease depth instead of increasing, creating lighter backgrounds when nesting.
Normal (depth increases)
Deeper
With inverse (depth decreases)
Lighter
<Container>
<Text>Normal (depth increases)</Text>
<Container>
<Text>Deeper</Text>
</Container>
</Container>
<Container>
<Text>With inverse (depth decreases)</Text>
<Container inverse>
<Text>Lighter</Text>
</Container>
</Container>Use resetDepth to reset the depth counter. Pass true to reset to 5, or a specific number.
Depth 1
Depth 2
Reset to 5
Depth 6
<Container>
<Text>Depth 1</Text>
<Container>
<Text>Depth 2</Text>
<Container resetDepth>
<Text>Reset to 5</Text>
<Container>
<Text>Depth 6</Text>
</Container>
</Container>
</Container>
</Container>Containers support different status colors for semantic meaning.
Primary container
Success container
Warning container
Danger container
Info container
Neutral container
<Container status="primary"> <Text>Primary container</Text> </Container> <Container status="success"> <Text>Success container</Text> </Container> <Container status="warning"> <Text>Warning container</Text> </Container> <Container status="danger"> <Text>Danger container</Text> </Container> <Container status="info"> <Text>Info container</Text> </Container> <Container status="neutral"> <Text>Neutral container</Text> </Container>
| Name | Type | Default | Description |
|---|---|---|---|
children | JSX.Element | Content to render inside the container | |
resetDepth | boolean | number | undefined | Reset depth to 5 (if true) or to a specific number. Useful for resetting nested container depth. |
inverse | boolean | undefined | If true, decreases depth instead of increasing. Creates lighter backgrounds when nesting. |
status | Status | 'background' | Status for color theming (e.g., 'success', 'danger', 'warning', 'info', 'primary', 'secondary', 'neutral', 'background') |
styles | StyleXStyles | undefined | Additional StyleX styles to apply to the container |
The Container component provides a ContainerContext that child components can use to access the current depth, status, and whether they are inside a container.
import { useContext } from "solid-js";
import { ContainerContext } from "@228-co/reef/components";
function ChildComponent() {
const { depth, status, inContainer } = useContext(ContainerContext);
return (
<div>
<p>Current depth: {depth()}</p>
<p>Current status: {status()}</p>
<p>In container: {inContainer() ? "Yes" : "No"}</p>
</div>
);
}depth - Accessor returning the current depth level (1-9)
status - Accessor returning the current status color
inContainer - Accessor returning whether the component is inside a Container
The depth value (1-9) determines the background and border colors. Depth 5 is the neutral midpoint. Lower depths produce darker colors, higher depths produce lighter colors.
Depth 1 (darkest)
Depth 3
Depth 5 (neutral)
Depth 7
Depth 9 (lightest)
<Container resetDepth={1}>
<Text>Depth 1 (darkest)</Text>
</Container>
<Container resetDepth={3}>
<Text>Depth 3</Text>
</Container>
<Container resetDepth={5}>
<Text>Depth 5 (neutral)</Text>
</Container>
<Container resetDepth={7}>
<Text>Depth 7</Text>
</Container>
<Container resetDepth={9}>
<Text>Depth 9 (lightest)</Text>
</Container>This grid shows every combination of depth (1-9) and status, allowing you to see how colors change across both dimensions.
background depth 1
background depth 2
background depth 3
background depth 4
background depth 5
background depth 6
background depth 7
background depth 8
background depth 9
primary depth 1
primary depth 2
primary depth 3
primary depth 4
primary depth 5
primary depth 6
primary depth 7
primary depth 8
primary depth 9
secondary depth 1
secondary depth 2
secondary depth 3
secondary depth 4
secondary depth 5
secondary depth 6
secondary depth 7
secondary depth 8
secondary depth 9
success depth 1
success depth 2
success depth 3
success depth 4
success depth 5
success depth 6
success depth 7
success depth 8
success depth 9
warning depth 1
warning depth 2
warning depth 3
warning depth 4
warning depth 5
warning depth 6
warning depth 7
warning depth 8
warning depth 9
danger depth 1
danger depth 2
danger depth 3
danger depth 4
danger depth 5
danger depth 6
danger depth 7
danger depth 8
danger depth 9
info depth 1
info depth 2
info depth 3
info depth 4
info depth 5
info depth 6
info depth 7
info depth 8
info depth 9
neutral depth 1
neutral depth 2
neutral depth 3
neutral depth 4
neutral depth 5
neutral depth 6
neutral depth 7
neutral depth 8
neutral depth 9
<For each={["background", "primary", "secondary", "success", "warning", "danger", "info", "neutral"]}>
{(status) => (
<div>
<Text.H3>{status}</Text.H3>
<div>
<For each={[1, 2, 3, 4, 5, 6, 7, 8, 9]}>
{(depth) => (
<Container resetDepth={depth} status={status}>
<Text>{status} depth {depth}</Text>
</Container>
)}
</For>
</div>
</div>
)}
</For>The following status values are available for theming containers:
background - Default neutral background color
primary - Primary brand color
secondary - Secondary brand color
success - Success or positive state
warning - Warning or caution state
danger - Danger or error state
info - Informational state
neutral - Neutral gray color