Stacks

import { XStack, YStack } from 'tamagui'

export default () => (
  <XStack space>
    <YStack />
    <YStack />
    <YStack />
  </XStack>
)

import { Text, XStack, YStack } from 'tamagui'

export default () => (
  <XStack
    flex={1}
    flexWrap="wrap"
    backgroundColor="#fff"
    hoverStyle={{
      backgroundColor: 'red',
    }}
    // media query
    $gtSm={{
      flexDirection: 'column',
      flexWrap: 'nowrap',
    }}
  >
    <YStack space="$3">
      <Text>Hello</Text>
      <Text>World</Text>
    </YStack>
  </XStack>
)

import { styled } from 'tamagui' // or '@tamagui/core'
import { ThemeableStack } from 'tamagui' // or '@tamagui/stacks'

const MyCard = styled(ThemeableStack, {
  hoverTheme: true,
  pressTheme: true,
  focusTheme: true,
  bordered: true,
})