Pagination

여러 페이지로 나뉜 목록이나 컬렉션에서 페이지를 이동할 때 사용합니다.

미리보기

현재 페이지와 앞뒤 이동

예제 안에서 1~3페이지를 전환하고 현재 페이지와 이전·다음 이동의 경계 상태를 확인합니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/pagination

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

PaginationContent와 PaginationItem 안에 페이지 링크를 두세요. 실제 주소를 제공하고 현재 페이지는 isActive로 표시하며 생략한 페이지에는 말줄임 표시를 사용합니다.

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";

export default function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
        <PaginationItem><PaginationLink href="?page=1">1</PaginationLink></PaginationItem>
        <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
        <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

API 레퍼런스

nav, ul, li, anchor의 시맨틱을 유지하는 조합형 pagination입니다. 활성 페이지, 이전·다음 링크, 축약 표시를 제공합니다.

컴포넌트	속성	타입	기본값	설명
`Pagination`	`aria-label`	`string`	`"pagination"`	pagination navigation 영역의 접근 가능한 이름입니다.
`PaginationLink`	`href`필수	`string`	`—`	대상 페이지의 실제 URL입니다.
`PaginationLink`	`isActive`	`boolean`	`false`	현재 페이지 스타일과 aria-current=page를 설정합니다.
`PaginationPrevious / PaginationNext`	`children`	`React.ReactNode`	`"Previous" / "Next"`	기본 이동 문구를 교체합니다.

미리보기

현재 페이지와 앞뒤 이동

설치

사용법

API 레퍼런스

접근성