Dot Pagination

dots x swipe

Dot-indicator pagination for carousels and sliders. From Bundui.

paginationdotsswipebundui

Code

pagination-dots.tsx

"use client";
import { useState } from "react";

export function DotPagination({ count, onChange }: { count: number; onChange?: (i: number) => void }) {
  const [page, setPage] = useState(0);
  return (
    <div className="flex gap-2">
      {Array.from({ length: count }, (_, i) => (
        <button key={i} aria-label={`Page ${i + 1}`} aria-current={page === i}
          onClick={() => { setPage(i); onChange?.(i); }}
          className={`h-2.5 rounded-full transition-all ${page === i ? "w-6 bg-brand" : "w-2.5 bg-muted"}`} />
      ))}
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Dot Pagination component and wire it to my accent.”