Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Small Size Pagination for Vue

Previous, pages 1 to 3 with page 2 current, and Next, at the small button size with a tight gap.

UI library: Ark UI

The row is Previous, pages 1, 2, and 3, and Next. Page 2 is current. The buttons are the small size, and they sit close together.

Use it in a table footer or a dense dashboard where the default size takes too much room. Touch targets want the large size instead. A Select is smaller still. In Vue, Ark UI does not pick the small size. You set it.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Pagination anatomy: root, previous, item, ellipsis, next

Usage

<Pagination>
  <PaginationContent class="gap-0.5">
    <PaginationItem><PaginationPrevious href="#" size="sm" /></PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" size="icon-sm">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" :isActive="true" size="icon-sm">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" size="icon-sm">3</PaginationLink>
    </PaginationItem>
    <PaginationItem><PaginationNext href="#" size="sm" /></PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

How is the row made small?

PaginationPrevious and PaginationNext take size="sm", the page links size="icon-sm": the small button sizes. PaginationContent takes gap-0.5 to bring them closer.

How is the current page marked?

isActive on page 2 gives it the outline style and aria-current="page". The other numbers are ghost links.

Are the small buttons big enough to tap?

They are meant for pointer-heavy screens such as dashboards. On touch screens, use the default or large size so each target is easier to hit.

How do I change the Previous and Next words?

Pass text. The defaults are Previous and Next, and the accessible names are Go to previous page and Go to next page. The word is hidden below the sm breakpoint, where only the chevron shows.

How do I hide Previous on the first page?

Pass count and bind v-model:page. Previous and Next then disable themselves at the ends.

How do I point the links at real pages?

Every href is #. Set each one to its page's URL, such as ?page=2.

API Reference

Pagination

Sets href="#", size="sm", size="icon-sm" and isActive. The rest is on the Pagination page.

All 19 pagination examples