# Pagination

Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

## Pagination Types

There are two types of pagination, namely fill and outline. If you want to mark active page, just add class .active in the pagination item.

    <!-- filled pagination -->
    <nav aria-label="Page navigation">
      <ul class="flex justify-start space-x-0">
        <li>
          <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -mr-0.5 rounded-l dark:bg-surfacedark-100 dark:border-gray-700" href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li><a class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -mr-0.5 dark:bg-surfacedark-100 dark:border-gray-700" href="#">1</a></li>
        <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -mr-0.5 dark:bg-surfacedark-100 dark:border-gray-700" href="#">2</a></li>
        <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -mr-0.5 dark:bg-surfacedark-100 dark:border-gray-700" href="#">3</a></li>
        <li>
          <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3.5 px-4 bg-surface-100 hover:bg-surface-400 dark:hover:bg-surfacedark-400 -mr-0.5 dark:bg-surfacedark-100 dark:border-gray-700 rounded-r" href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

    <!-- outline pagination -->
    <nav aria-label="Page navigation">
      <ul class="flex justify-start space-x-0">
        <li>
          <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -mr-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-l" href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li><a class="active [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -mr-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">1</a></li>
        <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -mr-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">2</a></li>
        <li><a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -mr-0.5 dark:bg-gray-800 dark:border-gray-700" href="#">3</a></li>
        <li>
          <a class="[&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 block relative py-3 px-4 bg-white border border-gray-200 hover:bg-surface-200 dark:hover:bg-surfacedark-200 -mr-0.5 dark:bg-gray-800 dark:border-gray-700 rounded-r" href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts