Stack

Used to layout its children in a vertical or horizontal stack.

import { Box, Stack } from '@fidely-ui/react'

export const StackBasic = () => {
  return (
    <Stack>
      <Box height={'50px'} bg={'bg.emphasized'} />
      <Box height={'50px'} bg={'bg.emphasized'} />
      <Box height={'50px'} bg={'bg.emphasized'} />
      <Box height={'50px'} bg={'bg.emphasized'} />
    </Stack>
  )
}

Usage

import { HStack, Stack, VStack } from '@fidely-ui/react'

<Stack>
  <div />
  <div />
</Stack>

Examples

HStack

Alternatively, you can use the HStack to create a horizontal stack and align its children horizontally.

<HStack>
  <Box height={'50px'} />
  <Box height={'50px'} />
  <Box height={'50px'} />
  <Box height={'50px'} />
</HStack>

VStack

Use the VStack to create a vertical stack and align its children vertically.

<VStack>
  <Box height={'50px'} />
  <Box height={'50px'} />
  <Box height={'50px'} />
  <Box height={'50px'} />
</VStack>

Responsive Direction

Use the direction prop to change the direction of the stack responsively.

<Stack direction={{ base: 'column', md: 'row' }} gap="6">
  <Box boxSize="25" />
  <Box boxSize="25" />
  <Box boxSize="25" />
</Stack>