shadcn-next-link-pagination

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #machine-learning #rust #macos #java #awesome-list #vue #security #ios #mcp #open-source

shadcn-next-link-pagination

(★ 129)

Use shadcn pagination components to navigate and update URL params

shadcn-next-link-pagination Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## Shadcn Nextjs Link Pagination

Use shadcn pagination components to create links that will dynamically update based on the current page and the total number of pages.

You can use Nextjs server components to control the `page` and `pageSize` parameters that get updated in the URL.

The first page stays canonical without a `page` query param:

`https://example.com?pageSize=20`

Subsequent pages include `page` as expected:

`https://example.com?page=2&pageSize=20`

![See it](https://raw.githubusercontent.com/bryaneaton13/shadcn-next-link-pagination/main/PaginationExample.gif)

## Getting Started with

1. Copy the code located in [`pagination-with-links.tsx`](https://github.com/bryaneaton13/shadcn-next-link-pagination/blob/main/components/ui/pagination-with-links.tsx) and paste it into your project.
2. Use the code

## Example

Simple Example

```tsx
<PaginationWithLinks page={1} pageSize={20} totalCount={500} />
```

Example with router.push navigation (this allows you to show a loading indicator while the page is changing)

```tsx
<PaginationWithLinks
  page={1}
  pageSize={20}
  totalCount={500}
  navigationMode="router"
/>
```

Example with Nextjs Server Components

```tsx
export default async function Example({ searchParams }) {
  const page = parseInt(searchParams.get("page") || "1");
  const pageSize = parseInt(searchParams.get("pageSize") || "20");

const [data, count] = await getDataWithCount();

return (
    <div>
      {/* Other code */}
      <PaginationWithLinks page={page} pageSize={pageSize} totalCount={count} />
    </div>
  );
}
```

shadcn-next-link-pagination

shadcn-next-link-pagination Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

shadcn-next-link-pagination

shadcn-next-link-pagination Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README