Pagination

Quick Preview

Use this public composition when building Pagination:

Pagination
└── PaginationContent
    ├── PaginationItem
    │   └── PaginationLink
    ├── PaginationPrevious
    └── PaginationNext

<Pagination><PaginationContent><PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem></PaginationContent></Pagination>

Use this as the starting point for Pagination. Keep product data, routing, fetching, and authorization logic in the consuming app.

Prop/API	Type	Default	Description
`isActive`	`boolean`	`false`	Marks current page.
`appearance`	`"page"	"control"`	-
`className`	`string`	-	Local layout or spacing overrides.
native/root props	React component props	-	Passed through to the underlying root or primitive.

Preserve the documented Pagination composition so labels, triggers, content, and controls remain connected.
Provide visible labels or accessible names for interactive controls.
Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
Do not communicate state with color alone; include text, icons, or helper copy.