Container

A flexible wrapper for grouping elements vertically (default) or horizontally. Optionally adds a border, fixed height with scrolling, and configurable gap between children.

For multi-column layouts use Grid.

Examples

Vertical stack (default)

First

Second

Third

<Container gap="small">
  <Box variant="info">First</Box>
  <Box variant="info">Second</Box>
  <Box variant="info">Third</Box>
</Container>

Horizontal row

A row of buttons or chips. Wraps onto multiple lines when space runs out.

<Container horizontal gap="small">
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
  <Button variant="secondary">Reset</Button>
</Container>

Card with border

Run summaryGenerated 1,000 samples in 2.4s

<Container border gap="small">
  <strong>Run summary</strong>
  <span>Generated 1,000 samples in 2.4s</span>
</Container>

Scrollable region

Setting height automatically enables scrolling when content overflows.

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Line 16

Line 17

Line 18

Line 19

Line 20

Line 21

Line 22

Line 23

Line 24

Line 25

Line 26

Line 27

Line 28

Line 29

Line 30

<Container border :height="180" gap="small">
  <div v-for="i in 30" :key="i">Line {{ i }}</div>
</Container>

Props

Prop	Type	Required	Default
border	boolean	No	—
height	number | string	No	—
horizontal	boolean	No	—
gap	ContainerGap | string	No	—