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

<YStack gap="$4">
<XStack gap="$2">
<ZStack>

import { View, Text } from 'tamagui'

<View padding="$4" backgroundColor="$background" />
<Text color="$color" fontSize="$4">Hello</Text>

import { Button } from 'tamagui'

<Button>Default</Button>
<Button size="$4">Sized</Button>
<Button theme="blue">Themed</Button>
<Button variant="outlined">Outlined</Button>
<Button circular icon={Plus} />
<Button disabled>Disabled</Button>

import { Input } from 'tamagui'

<Input placeholder="Enter text" />
<Input size="$4" />
<Input secureTextEntry />
<Input keyboardType="email-address" />

import { TextArea } from 'tamagui'

<TextArea placeholder="Long text..." numberOfLines={4} />

import { Checkbox } from 'tamagui'

<Checkbox id="terms" checked={checked} onCheckedChange={setChecked}>
  <Checkbox.Indicator>
    <Check />
  </Checkbox.Indicator>
</Checkbox>

import { Switch } from 'tamagui'

<Switch checked={on} onCheckedChange={setOn}>
  <Switch.Thumb />
</Switch>

import { RadioGroup } from 'tamagui'

<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroup.Item value="a" id="a">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
  <RadioGroup.Item value="b" id="b">
    <RadioGroup.Indicator />
  </RadioGroup.Item>
</RadioGroup>

import { Slider } from 'tamagui'

<Slider value={[value]} onValueChange={([v]) => setValue(v)} max={100} step={1}>
  <Slider.Track>
    <Slider.TrackActive />
  </Slider.Track>
  <Slider.Thumb index={0} />
</Slider>

import { Dialog } from 'tamagui'

<Dialog open={open} onOpenChange={setOpen}>
  <Dialog.Trigger asChild>
    <Button>Open</Button>
  </Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay key="overlay" />
    <Dialog.Content key="content">
      <Dialog.Title>Title</Dialog.Title>
      <Dialog.Description>Description</Dialog.Description>
      <Dialog.Close asChild>
        <Button>Close</Button>
      </Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>

import { Sheet } from 'tamagui'

<Sheet open={open} onOpenChange={setOpen} snapPoints={[80]} dismissOnSnapToBottom>
  <Sheet.Overlay />
  <Sheet.Frame padding="$4">
    <Sheet.Handle />
  </Sheet.Frame>
</Sheet>

import { Popover } from 'tamagui'

<Popover>
  <Popover.Trigger asChild>
    <Button>Open</Button>
  </Popover.Trigger>
  <Popover.Content>
    <Popover.Arrow />
  </Popover.Content>
</Popover>

import { Tooltip } from 'tamagui'

<Tooltip>
  <Tooltip.Trigger>
    <Button>Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <Tooltip.Arrow />
    <Text>Tooltip text</Text>
  </Tooltip.Content>
</Tooltip>

import { Tabs } from 'tamagui'

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Tab value="tab1"><Text>Tab 1</Text></Tabs.Tab>
    <Tabs.Tab value="tab2"><Text>Tab 2</Text></Tabs.Tab>
  </Tabs.List>
  <Tabs.Content value="tab1"></Tabs.Content>
  <Tabs.Content value="tab2"></Tabs.Content>
</Tabs>

import { Select } from 'tamagui'

<Select value={value} onValueChange={setValue}>
  <Select.Trigger>
    <Select.Value placeholder="Select..." />
  </Select.Trigger>
  <Select.Content>
    <Select.Viewport>
      <Select.Item value="a" index={0}>
        <Select.ItemText>Option A</Select.ItemText>
      </Select.Item>
      <Select.Item value="b" index={1}>
        <Select.ItemText>Option B</Select.ItemText>
      </Select.Item>
    </Select.Viewport>
  </Select.Content>
</Select>

import { Card } from 'tamagui'

<Card>
  <Card.Header>
    <H3>Title</H3>
  </Card.Header>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
  <Card.Background>
    <Image src="..." />
  </Card.Background>
</Card>

import { Avatar } from 'tamagui'

<Avatar circular size="$6">
  <Avatar.Image src="..." />
  <Avatar.Fallback>AB</Avatar.Fallback>
</Avatar>

import { Separator } from 'tamagui'

<Separator />
<Separator vertical />

import { Spinner } from 'tamagui'

<Spinner />
<Spinner size="large" color="$blue10" />

import { Progress } from 'tamagui'

<Progress value={60}>
  <Progress.Indicator animation="bouncy" />
</Progress>

import { H1, H2, H3, H4, H5, H6, Paragraph, Text } from 'tamagui'

<H1>Heading 1</H1>
<Paragraph>Body text paragraph</Paragraph>
<Text fontSize="$4" color="$color11">Custom text</Text>

import { Label } from 'tamagui'

<Label htmlFor="input-id">Label Text</Label>
<Input id="input-id" />

import { Spacer } from 'tamagui'

<XStack>
  <Text>Left</Text>
  <Spacer />
  <Text>Right</Text>
</XStack>

<Spacer size="$4" />

import { ScrollView } from 'tamagui'

<ScrollView>
</ScrollView>

import { Image } from 'tamagui'

<Image source={{ uri: '...' }} width={200} height={200} />

import { Adapt, Dialog, Sheet } from 'tamagui'

<Dialog>
  <Adapt when="sm" platform="touch">
    <Sheet modal>
      <Sheet.Frame>
        <Adapt.Contents />
      </Sheet.Frame>
    </Sheet>
  </Adapt>

  <Dialog.Portal>
    <Dialog.Content>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog>