Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Pagination Component - shadcn/ui Examples

About the shadcn/ui Pagination Component

The Pagination component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add pagination` and copy it directly into your project.

Pagination Component — Frequently Asked Questions

How do I control which page is active in shadcn Pagination?

The Pagination component renders links — control via URL params. Use `useSearchParams` to read `?page=3` and highlight `<PaginationLink isActive>` when `page === currentPage`.

How do I add ellipsis to shadcn Pagination for large page counts?

Use `<PaginationEllipsis>` between page groups. For example, show pages 1, 2, 3, `...`, 98, 99, 100. Calculate which pages to show based on the current page.

How do I make shadcn Pagination work with TanStack Table?

Use `table.getState().pagination.pageIndex` for current page and `table.getPageCount()` for total pages. Call `table.setPageIndex(n)` on page link clicks.