export default function Example() {
  const items = [
    "Card 1 content",
    "Card 2 content",
    "Card 3 content",
    "Card 4 content",
    "Card 5 content",
    "Card 6 content",
  ];
  return (
    <Box
      css={{
        paddingInline: "$100",
        width: "100vw",
      }}
    >
      <Carousel.Root itemsPerPage={1}>
        <Carousel.Header>
          <Carousel.HeaderContent>
            <Carousel.Title>Carousel Title</Carousel.Title>
          </Carousel.HeaderContent>
          <Carousel.HeaderActions>
            <Carousel.PreviousButton />
            <Carousel.NextButton />
          </Carousel.HeaderActions>
        </Carousel.Header>
        <Carousel.Content>
          {items.map((item) => (
            <Carousel.Item key={item}>
              <Card
                css={{
                  width: "200px",
                  height: "175px",
                  marginInlineEnd: "$025",
                }}
              >
                {item}
              </Card>
            </Carousel.Item>
          ))}
        </Carousel.Content>
        <Carousel.Footer>
          <Carousel.Dots />
        </Carousel.Footer>
      </Carousel.Root>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape