Pagination

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download pagination -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Pagination } from "@/components/ui/pagination";
import { PaginationContent } from "@/components/ui/pagination";
import { PaginationItem } from "@/components/ui/pagination";
import { PaginationPrevious } from "@/components/ui/pagination";
import { PaginationLink } from "@/components/ui/pagination";
import { PaginationNext } from "@/components/ui/pagination";
import * as UI from "@/components/ui/pagination";

const Component = UI.Pagination;

const args = {
  "size": "default",
  "isActive": true,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { size?: "default" | "sm" | "lg" | "icon" };
</script>

<template>
  <Pagination :items-per-page="10" :total="50"
    ><PaginationContent
      ><PaginationItem
        ><PaginationPrevious href="#" :size="args.size" /></PaginationItem
      ><PaginationItem
        ><PaginationLink href="#" :size="args.size" :is-active="args.isActive"
          >1</PaginationLink
        ></PaginationItem
      ><PaginationItem
        ><PaginationNext
          href="#"
          :size="args.size" /></PaginationItem></PaginationContent
  ></Pagination>
</template>

Examples

Basic

<script setup lang="ts">
import { Pagination } from "@/components/ui/pagination";
import { PaginationContent } from "@/components/ui/pagination";
import { PaginationItem } from "@/components/ui/pagination";
import { PaginationPrevious } from "@/components/ui/pagination";
import { PaginationLink } from "@/components/ui/pagination";
import { PaginationEllipsis } from "@/components/ui/pagination";
import { PaginationNext } from "@/components/ui/pagination";
import * as UI from "@/components/ui/pagination";

const Component = UI.Pagination;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Pagination :items-per-page="10" :total="50">
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" is-active> 2 </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

Simple

<script setup lang="ts">
import { Pagination } from "@/components/ui/pagination";
import { PaginationContent } from "@/components/ui/pagination";
import { PaginationItem } from "@/components/ui/pagination";
import { PaginationLink } from "@/components/ui/pagination";
import * as UI from "@/components/ui/pagination";

const Component = UI.Pagination;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Pagination :items-per-page="10" :total="50">
    <PaginationContent>
      <PaginationItem>
        <PaginationLink href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" is-active> 2 </PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">4</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">5</PaginationLink>
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

With Select

<script setup lang="ts">
import { Field } from "@/components/ui/field";
import { FieldLabel } from "@/components/ui/field";
import { Select } from "@/components/ui/select";
import { SelectTrigger } from "@/components/ui/select";
import { SelectValue } from "@/components/ui/select";
import { SelectContent } from "@/components/ui/select";
import { SelectGroup } from "@/components/ui/select";
import { SelectItem } from "@/components/ui/select";
import { Pagination } from "@/components/ui/pagination";
import { PaginationContent } from "@/components/ui/pagination";
import { PaginationItem } from "@/components/ui/pagination";
import { PaginationPrevious } from "@/components/ui/pagination";
import { PaginationNext } from "@/components/ui/pagination";
import * as UI from "@/components/ui/pagination";

const Component = UI.Pagination;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex items-center justify-between gap-4">
    <Field orientation="horizontal" class="w-fit">
      <FieldLabel html-for="select-rows-per-page"> Rows per page </FieldLabel>
      <Select default-value="25">
        <SelectTrigger id="select-rows-per-page" class="w-20">
          <SelectValue />
        </SelectTrigger>
        <SelectContent align="start">
          <SelectGroup>
            <SelectItem value="10">10</SelectItem>
            <SelectItem value="25">25</SelectItem>
            <SelectItem value="50">50</SelectItem>
            <SelectItem value="100">100</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </Field>
    <Pagination :items-per-page="10" :total="50" class="mx-0 w-auto">
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

PaginationContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

PaginationEllipsis

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

PaginationFirst

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`size`	`ButtonVariants["size"]`	`—`
`text`	`string`	`—`

PaginationItem

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`isActive`	`boolean`	`—`
`size`	`ButtonVariants["size"]`	`—`

PaginationLast

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`size`	`ButtonVariants["size"]`	`—`
`text`	`string`	`—`

PaginationLink

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`isActive`	`boolean`	`—`
`size`	`ButtonVariants["size"]`	`—`

PaginationNext

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`size`	`ButtonVariants["size"]`	`—`
`text`	`string`	`—`

PaginationPrevious

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`size`	`ButtonVariants["size"]`	`—`
`text`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.