Pagination
Page navigation composed from the kit's buttons.
Overview
Page navigation built entirely from Button rendered as links: quiet text
pills for pages and the previous/next arms, with the current page on the
high-emphasis tonal fill and aria-current="page".
$ npx morpha-ui add paginationInstallation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add pagination. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add paginationAPI Reference
Prop
Type
Accessibility
- Renders a
<nav aria-label="pagination">landmark with a list of real links. - The current page is exposed with
aria-current="page"and the tonal fill. - Previous/next keep icon + (responsive) text and always have an
aria-label.