export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        css={{
          display: "flex",
          gap: theme.space[100],
          position: "relative",
        }}
      >
        <PaginationDots amount={6} index={1} label="pagination dots" />
      </Box>
      <Box
        css={{
          display: "flex",
          gap: theme.space[100],
          marginBlockStart: theme.space[200],
          position: "relative",
        }}
      >
        <PaginationDots amount={5} index={1} label="pagination dots" />
      </Box>
      <Box
        css={{
          display: "flex",
          gap: theme.space[100],
          marginBlockStart: theme.space[200],
          position: "relative",
        }}
      >
        <PaginationDots amount={4} index={1} label="pagination dots" />
      </Box>
      <Box
        css={{
          display: "flex",
          gap: theme.space[100],
          marginBlockStart: theme.space[200],
          position: "relative",
        }}
      >
        <PaginationDots amount={3} index={1} label="pagination dots" />
      </Box>
      <Box
        css={{
          display: "flex",
          gap: theme.space[100],
          marginBlockStart: theme.space[200],
          position: "relative",
        }}
      >
        <PaginationDots amount={2} index={1} label="pagination dots" />
      </Box>
    </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