Pagination theming

Every cosmetic value Pagination renders is a --rozie-pagination-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

.rozie-pagination {
  --rozie-pagination-gap: 0.25rem;
  --rozie-pagination-accent: #0066cc;
  --rozie-pagination-size: 2.25rem;
  --rozie-pagination-hover-bg: rgba(0, 0, 0, 0.05);
}

Tokens

layout / typography

Token	Default
--rozie-pagination-gap	0.25rem
--rozie-pagination-font	inherit
--rozie-pagination-font-weight	500

accent — the single color most consumers will set; the active page + focus ring derive from it

Token	Default
--rozie-pagination-accent	#0066cc

per-control box model

Token	Default
--rozie-pagination-size	2.25rem
--rozie-pagination-padding-x	0.5rem
--rozie-pagination-fg	#1a1a1a
--rozie-pagination-bg	transparent
--rozie-pagination-border-width	1px
--rozie-pagination-border	rgba(0, 0, 0, 0.18)
--rozie-pagination-radius	6px

hover

Token	Default
--rozie-pagination-hover-bg	rgba(0, 0, 0, 0.05)
--rozie-pagination-hover-border	rgba(0, 0, 0, 0.28)

active (current) page

Token	Default
--rozie-pagination-active-fg	#fff
--rozie-pagination-active-bg	var(--rozie-pagination-accent)
--rozie-pagination-active-border	var(--rozie-pagination-accent)

focus ring

Token	Default
--rozie-pagination-ring-width	2px
--rozie-pagination-ring	var(--rozie-pagination-accent)
--rozie-pagination-ring-offset	1px

ellipsis marker

Token	Default
--rozie-pagination-ellipsis-fg	rgba(0, 0, 0, 0.5)

disabled

Token	Default
--rozie-pagination-disabled-opacity	0.5

Design-system bridges

Each package ships token presets that map Pagination's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/pagination-react/themes/base.css';
import '@rozie-ui/pagination-react/themes/bootstrap.css';
import '@rozie-ui/pagination-react/themes/material.css';
import '@rozie-ui/pagination-react/themes/shadcn.css';

See also

• Pagination — showcase & API — the full prop / event / slot / handle reference.
• Pagination — API reference — every prop, event, slot, and handle verb.
• Pagination — usage examples — idiomatic per-framework consumption code.
• Pagination comparison — how it stacks up against the per-framework libraries.
• Pagination — live demo — the real package running in the page.