Introducing AlienX extension – The next evolution of UI development.Check it out on VS Code

Enjoy AlienUI React? Give it a star on Github ⭐

Pagination

A customizable pagination component.

Galaxy Pagination

A default galactic pagination in the galaxy.

Preview

  1. Prev Page
  2. 1
  3. 2
  4. 3
  5. 4
  6. Next Page
import React from "react";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";

const Pagination = () => {
  return (
    <div>
      <ol className="flex justify-center gap-1 text-xs font-medium">
        <li>
          <a
            href="#"
            className="inline-flex size-8 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
          >
            <span className="sr-only">Prev Page</span>
            <FiChevronLeft className="size-4" />
          </a>
        </li>
        <li>
          <a
            href="#"
            className="block size-8 rounded border border-gray-100 bg-white text-center leading-8 text-gray-900"
          >
            1
          </a>
        </li>
        <li className="block size-8 rounded border bg-black text-center leading-8 text-white">
          2
        </li>
        <li>
          <a
            href="#"
            className="block size-8 rounded border border-gray-100 bg-white text-center leading-8 text-gray-900"
          >
            3
          </a>
        </li>
        <li>
          <a
            href="#"
            className="block size-8 rounded border border-gray-100 bg-white text-center leading-8 text-gray-900"
          >
            4
          </a>
        </li>
        <li>
          <a
            href="#"
            className="inline-flex size-8 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
          >
            <span className="sr-only">Next Page</span>
            <FiChevronRight className="size-4" />
          </a>
        </li>
      </ol>
    </div>
  );
};

export default Pagination;

Usage Example

import React from "react";
import Pagination from "./components/comp/Pagination/GalaxyPagination";

const App = () => {
  return (
    <div>
      <Pagination />
    </div>
  );
};

export default App;

Mars Pagination

Paginating to mars.

Preview

Prev Page

1/47

Next Page
import React from "react";
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";

const Pagination = () => {
  return (
    <div className="inline-flex items-center justify-center gap-3">
      <a
        href="#"
        className="inline-flex size-8 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
      >
        <span className="sr-only">Prev Page</span>
        <FiChevronLeft className="size-4" />
      </a>

      <p className="text-xs text-gray-900">
        1<span className="mx-0.25">/</span>47
      </p>

      <a
        href="#"
        className="inline-flex size-8 items-center justify-center rounded border border-gray-100 bg-white text-gray-900 rtl:rotate-180"
      >
        <span className="sr-only">Next Page</span>
        <FiChevronRight className="size-4" />
      </a>
    </div>
  );
};

export default Pagination;

Usage Example

import React from "react";
import Pagination from "./components/comp/Pagination/MarsPagination";

const App = () => {
  return (
    <div>
      <Pagination />
    </div>
  );
};

export default App;