NavigationNew
Glass Pagination
Numbered pages with previous and next, folding long runs into an ellipsis.
pnpm dlx shadcn@4.14.1 add @glassyui/glass-paginationPreview
Demos ready. Update 0.
Installation
First add the exact @glassyui mapping to components.json as shown in Getting Started. Then run the pinned item command:
pnpm dlx shadcn@4.14.1 add @glassyui/glass-paginationWhat this installs5 files, 1 package
Direct registry declarations
These values belong to @glassyui/glass-pagination itself in registry.json.
Package dependencies
clsx
Registry dependencies
@glassyui/glass-provider
File targets
components/glassyui/glass-pagination.tsx
Complete installed closure
This follows every namespaced registry dependency recursively and de-duplicates the packages and target files installed with this item.
Package dependencies
clsx
Installed files
components/glassyui/glass-pagination.tsxcomponents/glassyui/glass-provider.tsxcomponents/glassyui/liquid-filters.tsxcomponents/glassyui/lib/preferences.tscomponents/glassyui/styles/liquid.css
Usage
import { GlassPagination } from "@/components/glassyui/glass-pagination";
export function Pages() {
const [page, setPage] = useState(1);
return <GlassPagination page={page} pageCount={12} onPageChange={setPage} />;
}Examples
<GlassPagination page={page} pageCount={40} siblingCount={2} onPageChange={setPage} />API
GlassPaginationA nav landmark labelled Pagination, with a button for each page.
pageThe current page, counting from 1.
pageCountHow many pages there are.
onPageChangeCalled with the page to show.
siblingCount / boundaryCountPages shown either side of the current one, and at each end. Both default to 1.
previousLabel / nextLabelName the step buttons. Default to Previous page and Next page.
Notes
Accessibility
Each page button is named Page N and the current one carries aria-current="page". The step buttons disable at the ends.
Accessibility
Keep the Radix-backed semantics intact and preserve visible labels, focus states, and keyboard operation when copying the source.
Performance
Use provider quality preferences for dense app screens. Reserve strong refraction for hero or showcase surfaces.