Carousel

<Box extend={{ border: '2px solid black' }}>
  <Carousel>
    {['foo', 'bar', 'baz'].map((item) => (
      <CarouselItem maxWidth={220}>
        <Card padding={10} bg="background.secondary" alignItems="center">
          <Text>{item}</Text>
        </Card>
      </CarouselItem>
    ))}
  </Carousel>
</Box>

<Box extend={{ border: '2px solid black' }}>
  <Carousel gap={2} padding={[10, , , 20]}>
    {['foo', 'bar', 'baz'].map((item) => (
      <CarouselItem maxWidth={220}>
        <Card padding={10} bg="background.secondary" alignItems="center">
          <Text>{item}</Text>
        </Card>
      </CarouselItem>
    ))}
  </Carousel>
</Box>

<Box extend={{ border: '2px solid black' }}>
  <Carousel columns={5}>
    {['foo', 'bar', 'baz', 'foo', 'bar', 'baz', 'foo'].map((item) => (
      <CarouselItem maxWidth={220}>
        <Card padding={5} bg="background.secondary" alignItems="center">
          <Text>{item}</Text>
        </Card>
      </CarouselItem>
    ))}
  </Carousel>
</Box>