Pagination component needs i18n support and design consistency improvements

[hughlv]

Problem

The Pagination component has several design issues that affect usability for international applications and consistency with other shadcn/ui components:

1. Hardcoded English Text (No i18n Support)

The component hardcodes English text strings:

• aria-label="Go to previous page"
• aria-label="Go to next page"
• <span className="sr-only">More pages</span>

This makes it impossible to localize for non-English applications.

2. Inconsistent Icon Dependencies

The component uses Radix UI icons while most other shadcn/ui components use Lucide React:

import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"

3. Type Complexity from Anchor + Button Pattern

The component uses <a> tags styled with buttonVariants, which creates TypeScript complexity and confusion between server-side and client-side routing patterns.

Suggested Solutions

1. Add Configurable Text with showText Prop

type PaginationNavigationProps = {
  showText?: boolean;
} & React.ComponentProps<typeof PaginationLink>;

const PaginationPrevious = ({
  className,
  showText = true,
  children,
  ...props
}: PaginationNavigationProps) => (
  <PaginationLink
    aria-label="Go to previous page"
    size="default"
    className={cn('gap-1 pl-2.5', className)}
    {...props}
  >
    <ChevronLeft className="h-4 w-4" />
    {showText && (children || <span>Previous</span>)}
  </PaginationLink>
);

2. Standardize on Lucide Icons

Replace Radix icons with Lucide equivalents for consistency:

import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

3. Usage Examples

// Default behavior - shows "Previous" and "Next" text
<PaginationPrevious />
<PaginationNext />

// Icon-only for compact layouts
<PaginationPrevious showText={false} />
<PaginationNext showText={false} />

// Custom text for i18n via children
<PaginationPrevious>上一页</PaginationPrevious>
<PaginationNext>下一页</PaginationNext>

Impact

This affects any application targeting non-English users, which is a significant portion of the React ecosystem. The current implementation forces developers to either:

• Fork/modify the component
• Live with English-only text
• Build custom pagination from scratch

Workaround

Currently, developers need to manually replace icons and remove hardcoded text, losing the benefits of using the official component.

---

These changes would make the Pagination component more professional and aligned with shadcn/ui's high standards for other components.