How to Add Pagination to a React App

Before installing Pagination, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your styles, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Pagination imports the ChevronLeft, ChevronRight, and MoreHorizontal glyphs from lucide-react for the Previous, Next, and ellipsis controls, so keep that package installed — those icons and the cn utility are its only imports beyond React.

Run the CLI from your project root to add the Pagination source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes pagination.tsx, and finishes. No global config file is created; the result is one TypeScript file you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. When the list above the bar is a sortable grid, add the Drivn Data Table alongside it with the same command.

Import Pagination from your UI directory and render the bar. The root renders a <nav aria-label="pagination">, Pagination.Content renders the <ul> row, and each Pagination.Item wraps a single control — a Pagination.Previous, a numbered Pagination.Link, or a Pagination.Next. Mark the current page by passing isActive to its Pagination.Link, which applies the styles.active classes and sets aria-current="page" so assistive technology announces the position. Because every control is a native <a href> and the component holds no state, the file carries no 'use client' directive — it renders anywhere React reaches the DOM, including a Server Component. Give each link a real href like ?page=2 rather than # so the browser can bookmark it and a middle-click opens a new tab.

In a client-only React app the current page usually lives in useState, and each link toggles it rather than navigating away. Because Pagination is presentational, this wiring lives entirely at your call site: hold page in state, build a number range from your total count with Array.from, and set isActive={p === page} on each link so the highlight tracks state. Render each Pagination.Link with an onClick that calls setPage(p) and keep a href for the no-JavaScript fallback, then derive the visible slice of your data from page and a page size. The component never assumes where the page number lives, so the same markup serves URL-driven pagination in Next.js and state-driven pagination in a single-page app without any API change.

When a list runs to dozens of pages you do not render every link — show the first pages, an ellipsis, and the last pages. Drop a Pagination.Ellipsis into a Pagination.Item in place of the numbers you want to skip; it renders a MoreHorizontal glyph plus an sr-only "More pages" label from the styles.ellipsis class, so the gap reads correctly to a screen reader. Everything visual lives in one styles object at the top of the file you own — styles.link for the resting number, styles.active (bg-foreground text-background) for the current page, and styles.nav_link for Previous and Next. Because those classes read Tailwind tokens like bg-accent and text-muted-foreground, changing them in theming re-themes the whole bar for dark and light mode at once. For copy-paste ranges and layouts see the Pagination examples.