Pagination — CSS Component Generator

Pagination component

Pagination Generator

Style

Type

Gap8px

Border Radius6px

Colors

Active Color

Active Text Color

html

<nav class="pagination">
  <a href="#" class="page-link prev">&larr;</a>
  <a href="#" class="page-link">1</a>
  <a href="#" class="page-link active">2</a>
  <a href="#" class="page-link">3</a>
  <span class="dots">...</span>
  <a href="#" class="page-link">10</a>
  <a href="#" class="page-link next">&rarr;</a>
</nav>

css

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  border: 1px solid #e2e8f0;
  background-color: white;
  color: #475569;
}
.page-link:hover {
  background-color: #f8fafc;
  color: #1e293b;
}
.page-link.active {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}
.dots {
  color: #94a3b8;
  padding: 0 4px;
}

Keep position and destinations clear

Pagination helps people move through a larger collection while understanding where they are. The current page should be identifiable, and the previous and next destinations should preserve the active filters. The generated appearance needs real routes or data handling to become functional.

Use the generator to establish the appearance, then adapt the exported markup and styles to your application. A preview demonstrates the visual treatment; it does not certify your final interaction. Check the implementation with real content, a narrow screen, and keyboard input before publishing.

Try the component in the code editor →