<Pagination.Root>
  <Pagination.PageSizeSelect />
  <Pagination.FirstPageButton />
  <Pagination.PreviousPageButton />
  <Pagination.PageWindow />
  <Pagination.PageButton />
  <Pagination.NextPageButton />
  <Pagination.LastPageButton />
</Pagination.Root>

<Pagination.Composed
  onPageIndexChange={setPageIndex}
  onPageSizeChange={setPageSize}
  pageCount={Math.ceil(data.length / pageSize)}
  pageSize={pageSize}
  pageIndex={pageIndex}
  padding={2}
  itemsLabel="Rows"
/>

<Pagination.Root
  onPageIndexChange={setPageIndex}
  onPageSizeChange={setPageSize}
  pageCount={Math.ceil(data.length / pageSize)}
  pageSize={pageSize}
  pageIndex={pageIndex}
>
  <div className="flex items-center justify-between gap-6">
    <div className="flex items-center gap-2">
      <Text size="xs">Rows per page</Text>
      <Pagination.PageSizeSelect />
    </div>
    <Text size="xs" contrast="low">
      Page {pageIndex + 1} of {pageCount}
    </Text>
    <nav className="flex items-center gap-1 justify-end">
      <Pagination.FirstPageButton />
      <Pagination.PreviousPageButton />
      <Pagination.PageWindow padding={2} />
      <Pagination.NextPageButton />
      <Pagination.LastPageButton />
    </nav>
  </div>
</Pagination.Root>