ComponentsPaginator
Paginator
stableDot-style or numeric page navigation indicator.
Browser preview is a simulation. The copied component runs in actual terminal apps.
paginator.tsx
Dots
●●●●●●●
Numeric
1 /7
paginator.tsx
Installation
npx orizen-tui@latest add paginator
if dependency install fails, run: npm install ink@^5.0.1 react@^18.3.1 @types/react@^18.3.18 orizen-tui-core@latest
- Copy and paste the following code into your project.
- Update import paths to match your project setup.
components/ui/orizen/paginator.tsx
Usage
paginator.imports.tsx
paginator.example.tsx
Examples
Variants
paginator.example1.tsx
Dots
●●●●●●●
Numeric
1 /7
paginator.example1.tsx
API Reference
Paginator
PropTypeDefaultDescription
totalnumber—Total number of pages
total—
numberTotal number of pages
currentnumber—Current page (1-based)
current—
numberCurrent page (1-based)
variant"dots" | "numeric""dots"Visual style
variant"dots"
"dots" | "numeric"Visual style
activeDotstring"●"Character for the active page dot
activeDot"●"
stringCharacter for the active page dot
inactiveDotstring"○"Character for inactive page dots
inactiveDot"○"
stringCharacter for inactive page dots