---
title: StackView
category: Layout
summary: Lay out children in either a column or row. Wraps flexbox styles in a simple API inspired by Apple's UIStackView.
---

```jsx live
const highlight = '0px 0px 0px 2px white, 0px 0px 0px 4px hotpink'
const defaultItem = { grow: 1 }
const Item = ({ selected, ...restProps }) => (
  <Box
    minHeight={4}
    backgroundColor="blue-5"
    boxShadow={selected ? highlight : undefined}
    {...restProps}
  />
)
render(() => {
  const [items, setItems] = React.useState([
    defaultItem,
    defaultItem,
    defaultItem,
  ])
  const [selectedIndex, setSelectedIndex] = React.useState(null)
  const selectedItemProps = items[selectedIndex] || {}
  const setItem = (value) => {
    const nextItems = [...items]
    nextItems[selectedIndex] = {
      ...nextItems[selectedIndex],
      ...value,
    }
    setItems(nextItems)
  }
  return (
    <StackView width="100%" padding={4} spacing={2}>
      <StackView axis="horizontal" alignment="center" spacing={2}>
        <StackView
          axis="horizontal"
          grow={1}
          padding={2}
          spacing={2}
          backgroundColor="blue-0"
        >
          {items.map((itemProps, index) => (
            <Item
              key={index}
              selected={selectedIndex === index}
              onClick={(event) => {
                event.stopPropagation()
                setSelectedIndex(index)
              }}
              {...itemProps}
            />
          ))}
        </StackView>
      </StackView>
      {selectedIndex === null ? (
        <StackView
          alignSelf="center"
          axis="horizontal"
          alignment="center"
          spacing={1}
        >
          <Text>Select a cell above to edit or add a new one</Text>
          <Button
            size="xs"
            title="Add item"
            icon="add"
            onClick={() => setItems([...items, defaultItem])}
          />
        </StackView>
      ) : (
        <StackView
          axis="horizontal"
          alignment="center"
          distribution="space-between"
        >
          <Text shrink={0} weight={600}>
            Cell {selectedIndex}
          </Text>
          <Field label="Grow" inline width="auto">
            <NumberField
              value={selectedItemProps.grow || 0}
              onChange={(value) => setItem({ grow: value })}
            />
          </Field>
          <Field label="Shrink" inline width="auto">
            <NumberField
              value={selectedItemProps.shrink || 0}
              onChange={(value) => setItem({ shrink: value })}
            />
          </Field>
          <Field label="Basis" inline width="auto">
            <NumberField
              value={selectedItemProps.basis || 0}
              onChange={(value) => setItem({ basis: value })}
            />
          </Field>
          <Button
            title="Deselect"
            size="xs"
            onClick={() => setSelectedIndex(null)}
          />
        </StackView>
      )}
    </StackView>
  )
})
```

```jsx live
render(
  <StackView axis="horizontal" spacing={2}>
    {[1, 2, 3].map((index) => (
      <Box
        key={index}
        padding={1}
        radius={3}
        backgroundColor="blue-5"
        color="white"
      >
        Cell {index}
      </Box>
    ))}
  </StackView>
)
```

```jsx live
render(
  <StackView spacing={<Divider color="blue-5" />}>
    {[1, 2, 3].map((index) => (
      <Box key={index} padding={1}>
        Cell {index}
      </Box>
    ))}
  </StackView>
)
```