Pagination

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext } from "@line/abc-def-react/pagination";

<script setup lang="ts">
import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext } from "@line/abc-def-vue/pagination";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@line/abc-def-react/pagination";

export function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
        <PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="#" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

<script setup lang="ts">
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@line/abc-def-vue/pagination";
</script>

<template>
  <Pagination>
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#" :is-active="true">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationNext href="#" />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

Component tokens

Composition exports

Usage notes

• Use stable URLs for paged content.
• Keep previous and next controls available when possible.
• Related component tokens use the `pagination` token group in `@line/abc-def-styles/css`.