Stalk UI

Component

Pagination

Navigates between pages of a large, split data set.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/pagination

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<Pagination>
  <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>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`label``string`No-Accessible label for the control.
`showLabel``boolean`No-Show the text label next to the chevron.
PropTypeRequiredDefaultDescription
`label``string`No-Visually-hidden label announced for the skipped pages.
PropTypeRequiredDefaultDescription
`asChild``boolean`No-Render the single child element (e.g. a router \`<Link>\`) instead of an \`<a>\`.
`isActive``boolean`No-Marks the current page: applies \`aria-current="page"\` and the outline variant.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`variant``solid`, `outline`, `ghost`, `subtle`
`size``sm`, `md`, `lg`
`fullWidth``true`, `false`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/pagination.json`
  • Recipe: `button, pagination`
  • Files: `src/components/ui/pagination.tsx`