pagination-demo

PreviousNext
Docs
kanpekiexample

Preview

Loading preview…
registry/examples/pagination/pagination-demo.tsx
import { Pagination } from "~/registry/ui/pagination";

export function PaginationDemo() {
  return (
    <div className="flex flex-col gap-6">
      <Pagination.Root>
        <Pagination.Content>
          <Pagination.Item>
            <Pagination.Previous href="#" />
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">1</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#" isActive>
              2
            </Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Link href="#">3</Pagination.Link>
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Ellipsis />
          </Pagination.Item>
          <Pagination.Item>
            <Pagination.Next href="#" />
          </Pagination.Item>
        </Pagination.Content>
      </Pagination.Root>
    </div>
  );
}

Installation

npx shadcn@latest add @kanpeki/pagination-demo

Usage

import { PaginationDemo } from "@/components/pagination-demo"
<PaginationDemo />