Pagination

Page numbers with an elided middle, so the control never changes width.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { useState } from "react";
import { Pagination } from "@aile.sh/elia";

export function Example() {
  const [page, setPage] = useState(1);
  const pageCount = 24;

  return (
    <Pagination
      className="w-full max-w-lg"
      page={page}
      pageCount={pageCount}
      onChange={setPage}
      summary={`Page ${page} of ${pageCount}`}
    />
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia