Layouts

Layouts are used to structure the overall layout of your application.

Usage & Examples

Default

Inline LayoutInline text

Grid Layout

Card 1
Card 2
Card 3
Card 4
default.tsx
<Section tone="muted" padded>
            <Container>
              <Stack gap="md">
                <Inline justify="between" align="center">
                  <strong>Inline Layout</strong>
                  <span>Inline text</span>
                </Inline>

                <Grid minColumnWidth="12rem">
                  <p>Grid Layout</p>
                  <Card title="Container">Responsive max-width.</Card>
                  <Card title="Stack">Vertical rhythm.</Card>
                  <Card title="Grid">Auto-fit columns.</Card>
                </Grid>
              </Stack>
            </Container>
          </Section>

Props API

8 props
Columns
Layouts props API
Default
Description
alignLayoutAlignNoprops—Align prop for LayoutPrimitive.
asElementTypeNoprops—As prop for LayoutPrimitive.
childrenReactNodeNoprops—Content rendered inside the component.
classNamestringNostyling—Additional CSS class names for the component root.
data-testidstringNotesting—Test id used to identify the component in tests.
gapLayoutGapNoprops"md"Gap.
justifyLayoutJustifyNoprops—Justify prop for LayoutPrimitive.
testIdstringNoprops—Test id used to identify the component in tests.