A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Pagination

Page navigation with prev/next and jump

Ink OpenTUI

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/ink/pagination

Usage

import { Pagination } from "@/components/ui/pagination";

<Pagination total={10} current={page} onChange={(p) => setPage(p)} />

API Reference

Pagination

Prop	Type	Default
`total`	`number`	`required`
`current`	`number`	`required`
`onChange`	`(page: number) => void`	-
`showEdges`	`boolean`	`true`
`siblings`	`number`	`1`

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

Keyboard: Arrow keys move inside the composite; Home / End select the first or last enabled item; Enter / Space activate, select, or toggle; Escape cancels or closes an owned surface; Tab / Shift+Tab move between termcn/Ink focus targets.
Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.

Menu Sidebar

On This Page

Installation Usage API Reference Pagination Notes Accessibility

Edit this page Follow @shadcnlabs Join community