Components / Controls

Pager

Previous/next pagination. The caller owns the counting.

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/pager

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/pager.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/pager.

<Pager />

Examples

Page 1

Showing 12 creators on page 1

function PagerDemo() {
  const [page, setPage] = useState(1);
  return (
    <div className="w-full max-w-sm rounded-lg border">
      <div className="p-6 text-center text-sm text-muted-foreground">
        Page {page}
      </div>
      <Pager
        page={page}
        shown={12}
        total={40}
        limit={12}
        label="creator"
        onPageChange={setPage}
      />
    </div>
  );
}

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

Prop	Type	Default
`limit`required	`number`	—
`onPageChange`required	`(page: number) => void`	—
`page`required	`number`	—
`shown`required	`number`	—
`total`required	`number`	—
`label`	`string \| undefined`	`"result"`

Type

registry:ui

Pulls in

buttonshadcn installs these for you if they are missing.

npm packages

@hugeicons/react @hugeicons/core-free-icons

Files written

components/ui/hiip-ui/pager.tsx