Navigation MenuPopover
Get Started
Introduction
Components
Accordion
Badge
Button
Card
Checkbox
Command
Dialog
Dropdown Menu
Input
Select
Switch
Table
Tabs
Toast
Tooltip
Forms
Controlled Input
Field Arrays
Submit
Validation

Pagination

Pagination with page navigation, next and previous links.

1
2
3

#Installation

bunx --bun barefoot add pagination

#Usage

1import {2  Pagination,3  PaginationContent,4  PaginationItem,5  PaginationLink,6  PaginationPrevious,7  PaginationNext,8  PaginationEllipsis,9} from '@/components/ui/pagination'1011function PaginationDemo() {12  return (13    <Pagination>14      <PaginationContent>15        <PaginationItem>16          <PaginationPrevious href="#" />17        </PaginationItem>18        <PaginationItem>19          <PaginationLink href="#" isActive>1</PaginationLink>20        </PaginationItem>21        <PaginationItem>22          <PaginationLink href="#">2</PaginationLink>23        </PaginationItem>24        <PaginationItem>25          <PaginationLink href="#">3</PaginationLink>26        </PaginationItem>27        <PaginationItem>28          <PaginationEllipsis />29        </PaginationItem>30        <PaginationItem>31          <PaginationNext href="#" />32        </PaginationItem>33      </PaginationContent>34    </Pagination>35  )36}

#Examples

#Basic

1import {2  Pagination,3  PaginationContent,4  PaginationItem,5  PaginationLink,6  PaginationPrevious,7  PaginationNext,8  PaginationEllipsis,9} from '@/components/ui/pagination'1011function PaginationBasic() {12  return (13    <Pagination>14      <PaginationContent>15        <PaginationItem>16          <PaginationPrevious href="#" />17        </PaginationItem>18        <PaginationItem>19          <PaginationLink href="#" isActive>1</PaginationLink>20        </PaginationItem>21        <PaginationItem>22          <PaginationLink href="#">2</PaginationLink>23        </PaginationItem>24        <PaginationItem>25          <PaginationLink href="#">3</PaginationLink>26        </PaginationItem>27        <PaginationItem>28          <PaginationEllipsis />29        </PaginationItem>30        <PaginationItem>31          <PaginationNext href="#" />32        </PaginationItem>33      </PaginationContent>34    </Pagination>35  )36}

#Dynamic

Page 1 of 5

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Pagination,6  PaginationContent,7  PaginationItem,8  PaginationLink,9  PaginationPrevious,10  PaginationNext,11} from '@/components/ui/pagination'1213function PaginationDynamic() {14  const [currentPage, setCurrentPage] = createSignal(1)15  const totalPages = 51617  const goToPage = (page: number) => {18    if (page >= 1 && page <= totalPages) setCurrentPage(page)19  }2021  return (22    <div className="space-y-4">23      <Pagination>24        <PaginationContent>25          <PaginationItem>26            <PaginationPrevious27              href="#"28              onClick={(e) => { e.preventDefault(); goToPage(currentPage() - 1) }}29            />30          </PaginationItem>31          <PaginationItem>32            <PaginationLink href="#" isActive={currentPage() === 1}33              onClick={(e) => { e.preventDefault(); goToPage(1) }}>1</PaginationLink>34          </PaginationItem>35          <PaginationItem>36            <PaginationLink href="#" isActive={currentPage() === 2}37              onClick={(e) => { e.preventDefault(); goToPage(2) }}>2</PaginationLink>38          </PaginationItem>39          <PaginationItem>40            <PaginationLink href="#" isActive={currentPage() === 3}41              onClick={(e) => { e.preventDefault(); goToPage(3) }}>3</PaginationLink>42          </PaginationItem>43          <PaginationItem>44            <PaginationLink href="#" isActive={currentPage() === 4}45              onClick={(e) => { e.preventDefault(); goToPage(4) }}>4</PaginationLink>46          </PaginationItem>47          <PaginationItem>48            <PaginationLink href="#" isActive={currentPage() === 5}49              onClick={(e) => { e.preventDefault(); goToPage(5) }}>5</PaginationLink>50          </PaginationItem>51          <PaginationItem>52            <PaginationNext53              href="#"54              onClick={(e) => { e.preventDefault(); goToPage(currentPage() + 1) }}55            />56          </PaginationItem>57        </PaginationContent>58      </Pagination>59      <p className="text-center text-sm text-muted-foreground">60        Page {currentPage()} of {totalPages}61      </p>62    </div>63  )64}

#API Reference

PropTypeDefaultDescription
isActivebooleanfalseWhether the link represents the current page. Sets aria-current="page" and applies outline variant.
size'default' | 'icon''icon'The size of the pagination link. PaginationPrevious and PaginationNext use "default".
hrefstring-The URL the link points to.
onClick(e: Event) => void-Click event handler. Use with e.preventDefault() for client-side navigation.
childrenChild-The content of the pagination link (typically a page number).