Stack

Import

import { Stack, HStack, VStack } from "@sparrowengg/twigs-react";

Stack is a layout component used to group elements together and apply a space between them.

• VStack: used to stack elements in the vertical direction
• HStack: used to stack elements in the horizontal direction
• Stack: used to stack elements in the vertical or horizontal direction

Usage

Result

Loading...

Live EditorOpen in playground

<Stack>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "yellow",
    }}
  >
    1
  </Box>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "orange",
    }}
  >
    2
  </Box>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "green",
    }}
  >
    3
  </Box>
</Stack>

Responsive Direction

You can pass responsive values to the Stack component to change stack direction.

Result

Loading...

Live EditorOpen in playground

<Stack
  direction={{
    "screen-xxs": "column",
    "screen-xs": "column",
    "screen-sm": "row",
    "screen-md": "row",
    "screen-lg": "row-reverse",
  }}
>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "yellow",
    }}
  >
    1
  </Box>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "orange",
    }}
  >
    2
  </Box>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "green",
    }}
  >
    3
  </Box>
</Stack>

Stack Dividers

In some scenarios, you may want to add dividers between stacked elements. Pass the divider prop and set its value to any custom React element with a css prop to apply styles.

Result

Loading...

Live EditorOpen in playground

<VStack
  divider={
    <Separator
      orientation="horizontal"
      css={{ backgroundColor: "$neutral300" }}
    />
  }
>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "yellow",
    }}
  >
    1
  </Box>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "orange",
    }}
  >
    2
  </Box>
  <Box
    css={{
      width: 100,
      height: 100,
      backgroundColor: "green",
    }}
  >
    3
  </Box>
</VStack>

Props

Property	Description	Type	Default
alignX	Horizontal alignment of items	left | center | right	-
alignY	Vertical alignment of items	left | center | right	-
wrap	Whether items should wrap to new line	wrap | nowrap | wrap-reverse	-
gap	Gap between items	string	-
direction	The direction of the stack	row | column | row-reverse | column-reverse	column
divider	Divider between items	ReactElement	-