pnpm dlx dreamy add paginationPagination is used to navigate through pages of content when you have too much data to display on a single page.
<Pagination.Root count={100} pageSize={10} defaultPage={1}>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</Pagination.Root>You can display the current page information using the PageText component.
<Pagination.Root count={100} pageSize={10} defaultPage={3}>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
<Pagination.PageText format="compact" ml={4} />
</Pagination.Root>The Items component automatically handles ellipsis placement based on the current page and siblingCount. This eliminates the need to manually manage which pages to show.
<Pagination.Root count={200} pageSize={10} defaultPage={10} siblingCount={1}>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</Pagination.Root>If you need full control, you can still manually specify items and ellipsis.
<Pagination.Root count={100} page={5}>
<Pagination.PrevTrigger />
<Pagination.Item value={1} />
<Pagination.Ellipsis />
<Pagination.Item value={4} />
<Pagination.Item value={5} />
<Pagination.Item value={6} />
<Pagination.Ellipsis />
<Pagination.Item value={10} />
<Pagination.NextTrigger />
</Pagination.Root>You can control the pagination state using the page and onPageChange props. The Items component automatically updates based on the current page.
const [page, setPage] = useState(1);
<Pagination.Root
count={100}
page={page}
pageSize={10}
onPageChange={(details) => setPage(details.page)}
>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
<Pagination.PageText format="compact" ml={4} />
</Pagination.Root>Pagination comes with three sizes: sm, md (default), and lg.
<Pagination.Root count={100} pageSize={10} defaultPage={1} size="sm">
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</Pagination.Root>
<Pagination.Root count={100} pageSize={10} defaultPage={1} size="md">
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</Pagination.Root>
<Pagination.Root count={100} pageSize={10} defaultPage={1} size="lg">
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
</Pagination.Root>You can customize the content of the prev and next triggers.
<Pagination.Root count={100} pageSize={10} defaultPage={3}>
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
<Pagination.Items />
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
</Pagination.Root>The PageText component supports three different formats.
{/* Short format: "3 / 10" */}
<Pagination.Root count={100} pageSize={10} defaultPage={3}>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
<Pagination.PageText format="short" ml={4} />
</Pagination.Root>
{/* Compact format: "3 of 10" */}
<Pagination.Root count={100} pageSize={10} defaultPage={3}>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
<Pagination.PageText format="compact" ml={4} />
</Pagination.Root>
{/* Long format: "21-30 of 100" */}
<Pagination.Root count={100} pageSize={10} defaultPage={3}>
<Pagination.PrevTrigger />
<Pagination.Items />
<Pagination.NextTrigger />
<Pagination.PageText format="long" ml={4} />
</Pagination.Root>A hook that generates the pagination range based on the current page and total pages. This hook is used internally by the Items component, but you can also use it directly for custom implementations.
const pages = usePaginationRange({
page: 5,
totalPages: 10,
siblingCount: 1
});
// Returns an array like:
// [
// { type: 'page', value: 1 },
// { type: 'ellipsis', value: 0 },
// { type: 'page', value: 4 },
// { type: 'page', value: 5 },
// { type: 'page', value: 6 },
// { type: 'ellipsis', value: 0 },
// { type: 'page', value: 10 }
// ]