Skip to content

HStack

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

Usage

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

HStack Properties

alignHorizontal

Horizontally aligns the contents.

Code
<HStack 
  alignHorizontal="
left
right
center
space-between
center"
  grow
>

alignVertical

Vertically aligns the contents.

Code
<HStack 
  alignVertical="
bottom
top
center
center"
  grow
>

gap

The space between each column.

Code
<HStack 
  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

HStack inherits the properties of Box.