Skip to content

VStack

Renders children vertically, with consistent spacing (if specified) between them.

Usage

Code
import { createSystem } from 'frog/ui'
 
const { Box, VStack } = createSystem()
 
function Example() {
  return (
    <VStack gap="8" grow>
      <Box backgroundColor="red" height="100%" />
      <Box backgroundColor="red" height="100%" />
      <Box backgroundColor="red" height="100%" />
    </VStack>
  )
}

VStack Properties

alignHorizontal

Horizontally aligns the contents.

Code
<VStack 
  alignHorizontal="
left
right
center
center"
  grow
>

alignVertical

Vertically aligns the contents.

Code
<VStack 
  alignVertical="
bottom
top
center
space-between
center"
  grow
>

gap

The space between each column.

Code
<VStack 
  gap="
0
1
2
3
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
42
44
46
48
52
56
60
64
72
80
96
128
160
192
224
256
8"
  grow
>

Box Properties

VStack inherits the properties of Box.