Default

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
<Shelf>
  {Array.from(Array(25))
    .map((_, i) => [300, 250, 200, 333, 400][i % 5])
    .map((height, j) => (
      <Box
        key={j}
        width={300}
        height={height}
        bg="black10"
        border="1px solid"
        borderColor="black30"
        p={1}
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Text variant="sm-display">{j + 1}</Text>
      </Box>
    ))}
</Shelf>

Alignment

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
<Shelf alignItems="center">
  {Array.from(Array(25))
    .map((_, i) => [300, 250, 200, 333, 400][i % 5])
    .map((height, j) => (
      <Box
        key={j}
        width={300}
        height={height}
        bg="black10"
        border="1px solid"
        borderColor="black30"
        p={1}
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Text variant="sm-display">{j + 1}</Text>
      </Box>
    ))}
</Shelf>

Hide Progress

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
<Shelf showProgress={false}>
  {Array.from(Array(25))
    .map((_, i) => [300, 250, 200, 333, 400][i % 5])
    .map((height, j) => (
      <Box
        key={j}
        width={300}
        height={height}
        bg="black10"
        border="1px solid"
        borderColor="black30"
        p={1}
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <Text variant="sm-display">{j + 1}</Text>
      </Box>
    ))}
</Shelf>

Navigation Buttons

<ShelfNext hover focus />
On this page
Default
Alignment
Hide Progress
Navigation Buttons