Paginator

Navigation

About

A prev/next navigation pair that links a reader from the current article or doc page to the adjacent one, each side showing a direction label and the linked item's title.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Paginator to your project and fits it to your theme.

Code

How Paginator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Paginator from "@/components/ui/paginator";

export default function PaginatorDemo() {
  return (
    <div className="w-full max-w-2xl mx-auto p-8 bg-background">
      <Paginator
        ariaLabel="文档导航"
        prevItem={{
          title: "数据展示",
          permalink: "/docs/project/ui/data-display",
          label: "上一篇",
        }}
        nextItem={{
          title: "主题定制",
          permalink: "/docs/project/ui/theming",
          label: "下一篇",
        }}
      />
    </div>
  );
}