Pagination

Pagination with page navigation, next and previous links.

Installation


npx shadcn@latest add @rescript-shadcn/Pagination

Usage

<Pagination>
  <Pagination.Content>
    <Pagination.Item>
      <Pagination.Previous href="#" />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#"> {"1"->React.string} </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#" isActive=true> {"2"->React.string} </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Link href="#"> {"3"->React.string} </Pagination.Link>
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Ellipsis />
    </Pagination.Item>
    <Pagination.Item>
      <Pagination.Next href="#" />
    </Pagination.Item>
  </Pagination.Content>
</Pagination>

Examples

Simple

A simple pagination with only page numbers.

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

Rows per page

Next.js

By default the <Pagination.Link /> component will render an <a /> tag.

To use the Next.js <Link /> component, make the following updates to Pagination.res.

 
module Link = (...) => 
  <Item>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </Item>

Note: We are making updates to the cli to automatically do this for you.