Pagination
Pagination component for navigating through multiple pages of content. Includes page numbers, navigation buttons, table count display, and dot indicators for carousels.
Installation
The Pagination component is part of the design system. Import it from the UI package.
import { Pagination, PaginationDotIndicator, PaginationDotGroup } from "@/components/ui/pagination"Usage
Use Pagination with currentPage, totalPages, and onPageChange. Copy the example below to get started.
Showing 1 to 10 of 678 entries.Items on page
Sizes
Pagination component supports desktop and mobile sizes.
Desktop
Showing 1 to 10 of 678 entries.Items on page
<Pagination
currentPage={1}
totalPages={24}
totalItems={678}
itemsPerPage={10}
size="desktop"
onPageChange={(page) => console.log(page)}
/>Mobile
<Pagination
currentPage={1}
totalPages={24}
totalItems={678}
itemsPerPage={10}
size="mobile"
showTableCount={false}
onPageChange={(page) => console.log(page)}
/>Dot Indicators
Dot indicators for carousels and image galleries. Available in dot and line styles.
Dot Indicator
<PaginationDotIndicator current={false} size="md" />
<PaginationDotIndicator current={true} size="md" />
<PaginationDotIndicator current={false} size="lg" />
<PaginationDotIndicator current={true} size="lg" />Dot Group
<PaginationDotGroup total={3} current={0} size="md" style="dot" />
<PaginationDotGroup total={3} current={1} size="md" style="dot" framed />
<PaginationDotGroup total={4} current={2} size="md" style="line" />
<PaginationDotGroup total={3} current={0} size="lg" style="dot" />Carousel
Carousel image component with navigation arrows and dot indicators. Perfect for image galleries and slideshows.
Small Size
Medium Size
Large Size
<CarouselImage
size="sm"
currentSlide={0}
totalSlides={3}
onPrevious={() => console.log('Previous')}
onNext={() => console.log('Next')}
/>Examples
Controlled
Showing 1 to 10 of 678 entries.Items on page
const [currentPage, setCurrentPage] = useState(1)
<Pagination
currentPage={currentPage}
totalPages={24}
totalItems={678}
itemsPerPage={10}
onPageChange={setCurrentPage}
/>Middle Page
Showing 41 to 50 of 678 entries.Items on page
Last Page
Showing 231 to 240 of 678 entries.Items on page
Without Table Count
Korean Language
1부터 10까지, 총 678개 항목.페이지당 항목
API Reference
The Pagination component displays page navigation with optional dot indicators and mobile layout. It supports currentPage, totalPages, onPageChange, and variant.
See the interface below for full prop details.
interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
currentPage?: number
totalPages?: number
totalItems?: number
itemsPerPage?: number
showTableCount?: boolean
showPageNumbers?: boolean
size?: "desktop" | "mobile"
lang?: "eng" | "kor"
onPageChange?: (page: number) => void
onItemsPerPageChange?: (itemsPerPage: number) => void
maxPageButtons?: number
}
interface PaginationDotIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
current?: boolean
size?: "md" | "lg"
}
interface PaginationDotGroupProps extends React.HTMLAttributes<HTMLDivElement> {
total?: number
current?: number
size?: "md" | "lg"
style?: "dot" | "line"
framed?: boolean
}