{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-pagination-15","type":"registry:block","title":"Pagination with page info, numbered pages, ellipsis, and per-page select","description":"Pagination with page info, numbered pages, ellipsis, and per-page select","dependencies":[],"registryDependencies":["native-select","pagination"],"files":[{"path":"c-pagination-15.tsx","type":"registry:block","content":"import {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/components/ui/native-select\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/components/ui/pagination\"\n\nexport function Pattern() {\n  return (\n    <Pagination>\n      <PaginationContent className=\"w-full justify-between\">\n        <PaginationItem>\n          <span className=\"text-muted-foreground text-sm\">\n            Page <span className=\"text-foreground font-medium\">1</span> of{\" \"}\n            <span className=\"text-foreground font-medium\">10</span>\n          </span>\n        </PaginationItem>\n        <PaginationItem className=\"flex items-center gap-1\">\n          <PaginationPrevious href=\"#\" />\n          <PaginationLink href=\"#\" isActive>\n            1\n          </PaginationLink>\n          <PaginationLink href=\"#\">2</PaginationLink>\n          <PaginationLink href=\"#\">3</PaginationLink>\n          <PaginationLink href=\"#\">4</PaginationLink>\n          <PaginationEllipsis />\n          <PaginationNext href=\"#\" />\n        </PaginationItem>\n        <PaginationItem>\n          <NativeSelect className=\"w-28\">\n            <NativeSelectOption value=\"10\">10 / page</NativeSelectOption>\n            <NativeSelectOption value=\"20\">20 / page</NativeSelectOption>\n            <NativeSelectOption value=\"50\">50 / page</NativeSelectOption>\n            <NativeSelectOption value=\"100\">100 / page</NativeSelectOption>\n          </NativeSelect>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}","target":"components/examples/c-pagination-15.tsx"}],"meta":{"order":15,"gridSize":1}}