Compact Dots Step Pagination

paginations

Minimalist expandable dot indicators for carousels and multi-step flows.

#pagination#dots#carousel#steps

Live Interactive Preview

Component Source Code

Select language in the dropdown

CompactDotsPagination.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { ChevronLeft, ChevronRight } from 'lucide-react';
5
6export default function CompactDotsPagination() {
7  const [activeStep, setActiveStep] = useState(1);
8  const totalSteps = 6;
9
10  return (
11    <div className="w-full max-w-xs sm:max-w-sm rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 shadow-lg flex items-center justify-between transition-colors">
12      <button
13        onClick={() => setActiveStep((s) => Math.max(0, s - 1))}
14        disabled={activeStep === 0}
15        className="flex h-8 w-8 items-center justify-center rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-30 transition"
16        aria-label="Previous Step"
17      >
18        <ChevronLeft className="h-4 w-4" />
19      </button>
20
21      <div className="flex items-center gap-1.5">
22        {Array.from({ length: totalSteps }).map((_, idx) => (
23          <button
24            key={idx}
25            onClick={() => setActiveStep(idx)}
26            className={`h-2.5 rounded-full transition-all duration-300 ${
27              activeStep === idx
28                ? 'w-7 bg-blue-600 shadow-sm'
29                : 'w-2.5 bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700'
30            }`}
31            aria-label={`Go to step ${idx + 1}`}
32          />
33        ))}
34      </div>
35
36      <button
37        onClick={() => setActiveStep((s) => Math.min(totalSteps - 1, s + 1))}
38        disabled={activeStep === totalSteps - 1}
39        className="flex h-8 w-8 items-center justify-center rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 disabled:opacity-30 transition"
40        aria-label="Next Step"
41      >
42        <ChevronRight className="h-4 w-4" />
43      </button>
44    </div>
45  );
46}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/paginations/CompactDotsPagination.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import CompactDotsStepPagination from '@/components/paginations/CompactDotsPagination';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <CompactDotsStepPagination />
7    </main>
8  );
9}