Carousel

Carousel Props

Name	Type	Default	Description
columns	number	3	How many columns are rendered in a row on desktop
gap	number, string, array	4	Space between the items
padding	number, string, array		Space around the scroll container, defaults to `theme.outerPadding`

CarouselItem Props

Name	Type	Default	Description
maxWidth	string, number		The maximum width an item can take
width	string, number	90%	The default width an item takes

Examples

Dark Mode
Open in Playroom

<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>
    {['foo', 'bar', 'baz'].map((item) => (
      <CarouselItem maxWidth={220}>
        <Card padding={10} bg="background.secondary" alignItems="center">
          <Text>{item}</Text>
        </Card>
      </CarouselItem>
    ))}
  </Carousel>
</Box>

Spacing

Dark Mode
Open in Playroom

<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 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>

Columns

Dark Mode
Open in Playroom

<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><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>