Pagination with Shadcn

First, you should get familiar with pagination components (e.g., Pagination , PaginationItem , PaginationLink , ...) provided by Shadcn . Play around with the following pagination bar, and think about how to make it with Shadcn 🤔. Interactive or embedded content omitted — see the original post: https://isaacfei.com/posts/pagination-with-shadcn The total number of pagination items is always 7 (including the ellipisis items but excluding the previous and next pagination items). This is to ensure that the pagination bar has a fixed width. At a first glance, the pagination bar has 3 different UI displays (considering the number of positions of the ellipsis items): Leading 7 items followed by an ellipsis and the last pagination item. e.g., 1, 2, 3, 4, 5, ..., 100. This happens when the active page number is less than 5. The active pagination item is at the center surrounded by 2 consecutive pagination items. And the the bar starts with the first item followed by an ellipsis and ends with an