Navigation paginationnavigationglass

Glass Pagination

Stylish page switcher with blurred background and active states.

Usage

Copy the full block below to use this component with its imports.

---
import { GlassPagination } from 'astro-component-kit';
---

<PaginationGlass>Content</PaginationGlass>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassPagination.astro and paste the following code:

---
---
<nav class="pagination">
  <button class="prev">←</button>
  <div class="pages">
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <span>...</span>
    <a href="#">12</a>
  </div>
  <button class="next">→</button>
</nav>
<style>
  .pagination { display: flex; align-items: center; gap: 1rem; }
  .pages { display: flex; gap: 0.5rem; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); }
  .pages a, button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #94a3b8; text-decoration: none; transition: 0.2s; border: none; background: none; cursor: pointer; }
  .pages a.active { background: #6366f1; color: #fff; }
  .pages a:hover:not(.active) { background: rgba(255,255,255,0.05); color: #fff; }
</style>

Quick Info

Category: Navigation
Filename: GlassPagination.astro
Dependencies: None — pure Astro + CSS
Tags: paginationnavigationglass