Liquid Pagination

Navigation 1

About

A page-number strip with previous/next controls and ellipsis truncation for navigating long lists of pages, rendered with an animated liquid-glass surface.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Pagination to your project and fits it to your theme.

Code

How Liquid Pagination is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useEffect, useState } from "react";
import LiquidPagination from "@/components/ui/liquid-pagination";

function useIsDarkMode() {
  const [isDark, setIsDark] = useState(false);
  useEffect(() => {
    const root = document.documentElement;
    const update = () => setIsDark(root.classList.contains("dark"));
    update();
    const observer = new MutationObserver(update);
    observer.observe(root, { attributes: true, attributeFilter: ["class"] });
    return () => observer.disconnect();
  }, []);
  return isDark;
}

export default function LiquidPaginationDemo() {
  const isDark = useIsDarkMode();

  return (
    <div
      className="lq-provider"
      data-liquid-motion="on"
      data-liquid-theme={isDark ? "dark" : "light"}
      data-liquid-transparency="on"
      style={
        {
          "--lq-accent": "#8f8f8f",
          "--lq-frost": "0px",
          "--lq-intensity": 1.2,
          "--lq-space": "4px",
          "--lq-veil": 0,
        } as any
      }
    >
      <div className="flex min-h-screen w-full items-center justify-center p-10">
        <LiquidPagination count={12} defaultPage={3} />
      </div>
    </div>
  );
}