{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-pagination-11","type":"registry:block","title":"Pagination with outline style buttons","description":"Pagination with outline style buttons","dependencies":[],"registryDependencies":["pagination"],"files":[{"path":"c-pagination-11.tsx","type":"registry:block","content":"import {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n} from \"@/components/ui/pagination\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <Pagination>\n      <PaginationContent className=\"rounded-md gap-0 overflow-hidden border\">\n        <PaginationItem>\n          <PaginationLink\n            href=\"#\"\n            size=\"icon\"\n            aria-label=\"Go to previous page\"\n            className=\"border-border rounded-none border-0 border-e\"\n          >\n            <IconPlaceholder\n              lucide=\"ChevronLeftIcon\"\n              tabler=\"IconChevronLeft\"\n              hugeicons=\"ArrowLeft01Icon\"\n              phosphor=\"CaretLeftIcon\"\n              remixicon=\"RiArrowLeftSLine\"\n            />\n          </PaginationLink>\n        </PaginationItem>\n\n        {\n          /* Page numbers */\n          Array.from({ length: 4 }).map((_, index) => (\n            <PaginationItem key={index}>\n              <PaginationLink\n                href=\"#\"\n                isActive={index === 2}\n                className=\"data-[active=true]:bg-muted border-border rounded-none border-0 border-e\"\n              >\n                {index + 1}\n              </PaginationLink>\n            </PaginationItem>\n          ))\n        }\n\n        <PaginationItem className=\"border-border border-0 border-e\">\n          <PaginationEllipsis />\n        </PaginationItem>\n\n        <PaginationItem>\n          <PaginationLink\n            href=\"#\"\n            size=\"icon\"\n            aria-label=\"Go to next page\"\n            className=\"rounded-none border-0\"\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n            />\n          </PaginationLink>\n        </PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  )\n}","target":"components/examples/c-pagination-11.tsx"}],"meta":{"order":11}}