XiodUI
HomeDocs
OverviewComponentsThemes & ColorsChangelog
⌘ K

Components

  • Accordion
  • Agent Steps
    New
  • Alert
  • Alert Dialog
  • Aspect Ratio
    New
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
    Updated
  • Button Group
    New
  • Button Split
    New
  • Calendar
    New
  • Card
  • Carousel
    New
  • Checkbox
  • Circular Progress
    New
  • Collapsible
  • Color Picker
    New
  • Combobox
  • Command
  • Context Menu
    New
  • Copy To Clipboard
    New
  • Corner Badge
    New
  • Dashboard Grid
    New
  • Date Picker
    New
  • Dialog
  • Dot Matrix
    New
  • Draggable
    New
  • Drawer
    New
  • Empty
  • Field
  • Fieldset
  • File Upload
    New
  • Form
  • Frame
  • Gauge
    New
  • Grid
    New
  • Group
  • Input
  • Input Group
  • Input OTP
    New
  • Input Payment
    New
  • Input Phone
    New
  • Input Sensitive
    New
  • Kbd
  • Kinetic Click
    New
  • Label
  • List Box
    New
  • Loader
  • Marker
    New
  • Menu
  • Menubar
  • Message
    New
  • Meter
  • Morphic Toast
    New
  • Navigation Menu
  • Number Field
  • Option Picker
    New
  • Orb
    New
  • Pagination
  • Popover
  • Preview Card
  • Progress
  • Radio
  • Resizable
    New
  • Ruler Picker
    New
  • Scroll Area
  • Scroll Bar
    New
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
    Updated
  • Sortable
    New
  • Switch
    Updated
  • Table
  • Tabs
  • Text
    New
  • Textarea
  • Timeline
    New
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
    Updated
  • Waveform
    New
  • Wheel Picker
    New
/
/

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Pagination

Previous: OrbNext: Popover

Pagination with page navigation, next and previous links.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Pagination,3  PaginationContent,4  PaginationEllipsis,5  PaginationFirst,6  PaginationInput,7  PaginationItem,8  PaginationLast,9  PaginationLink,10  PaginationNext,11  PaginationPrevious12} from "xiod-ui/pagination";

Anatomy

1<Pagination>2  <PaginationInput />3  <PaginationContent>4    <PaginationItem />5    <PaginationEllipsis />6    <PaginationFirst />7    <PaginationLast />8    <PaginationLink />9    <PaginationNext />10    <PaginationPrevious />11  </PaginationContent>12</Pagination>

API Reference

Detailed documentation of properties and options.

PaginationFirst

PropTypeDefaultDescription
isActive
boolean
|undefined
-
size
"default"
|"sm"
|"lg"
|"xs"
|"xl"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
|null
|undefined
-
render
ReactElement<unknown, string
|JSXElementConstructor<any>>
|ComponentRenderFn<HTMLProps, {}>
|undefined
-Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

PaginationInput

PropTypeDefaultDescription
value
number
|undefined
-
onChange
((page: number) => void)
|undefined
-
totalPages
number
|undefined
-

PaginationLast

PropTypeDefaultDescription
isActive
boolean
|undefined
-
size
"default"
|"sm"
|"lg"
|"xs"
|"xl"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
|null
|undefined
-
render
ReactElement<unknown, string
|JSXElementConstructor<any>>
|ComponentRenderFn<HTMLProps, {}>
|undefined
-Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

PaginationLink

PropTypeDefaultDescription
isActive
boolean
|undefined
-
size
"default"
|"sm"
|"lg"
|"xs"
|"xl"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
|null
|undefined
icon
render
ReactElement<unknown, string
|JSXElementConstructor<any>>
|ComponentRenderFn<HTMLProps, {}>
|undefined
-Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

PaginationNext

PropTypeDefaultDescription
isActive
boolean
|undefined
-
size
"default"
|"sm"
|"lg"
|"xs"
|"xl"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
|null
|undefined
-
render
ReactElement<unknown, string
|JSXElementConstructor<any>>
|ComponentRenderFn<HTMLProps, {}>
|undefined
-Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

PaginationPrevious

PropTypeDefaultDescription
isActive
boolean
|undefined
-
size
"default"
|"sm"
|"lg"
|"xs"
|"xl"
|"icon"
|"icon-lg"
|"icon-sm"
|"icon-xl"
|"icon-xs"
|null
|undefined
-
render
ReactElement<unknown, string
|JSXElementConstructor<any>>
|ComponentRenderFn<HTMLProps, {}>
|undefined
-Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
OrbPopover