Pagination

설치 확인

페이지 이동

1. 목적과 출처

페이지 이동

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/pagination.tsx
Registry: @adcapsule/pagination

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Pagination 쓰임
쓰임	모양
번호와 이전·다음	이전 1 2 3 다음
줄임 PaginationEllipsis	1 8 20
이전·다음만	이전 다음

3. 속성 바꿔 보기

3 / 12 페이지

전체 페이지

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=2" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=3" isActive>3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="?page=4" /></PaginationItem>
  </PaginationContent>
</Pagination>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/pagination

npm 패키지: lucide-react
함께 설치: @adcapsule/button, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
  </PaginationContent>
</Pagination>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

isActive로 현재 페이지
PaginationPrevious·Next의 text(기본 이전·다음)
PaginationEllipsis로 줄임

공통으로 유지할 토큰

Button ghost·outline과 같음
control.height.md
radius.md (6px)

쓰임

모양

번호와 이전·다음

줄임 PaginationEllipsis

이전·다음만

3. 속성 바꿔 보기

3 / 12 페이지

전체 페이지

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=2" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=3" isActive>3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="?page=4" /></PaginationItem>
  </PaginationContent>
</Pagination>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/pagination

npm 패키지: lucide-react
함께 설치: @adcapsule/button, @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?page=1" /></PaginationItem>
    <PaginationItem><PaginationLink href="?page=2" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationNext href="?page=3" /></PaginationItem>
  </PaginationContent>
</Pagination>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿