# Dots

> Carousel-style dots; the active page expands to a pill.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/pagination-07).

- Page, with a live preview: https://shadcn.exchange/r/flx/pagination-07
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/pagination-07-light-5f47ef1bfb9db4d5.png
- Registry item: https://ui.flexnative.com/r/pagination-07.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/pagination-07.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/patterns/pagination/pagination-07.tsx`

```tsx
'use client'

import { useState } from 'react'

import { cn } from '@/lib/utils'

const TOTAL = 6

export function Pagination07() {
  const [page, setPage] = useState(0)

  return (
    <nav
      aria-label="pagination"
      className="bg-muted/60 flex items-center gap-2 rounded-full p-2"
    >
      {Array.from({ length: TOTAL }).map((_, i) => {
        const isActive = i === page
        return (
          <button
            key={i}
            type="button"
            aria-label={`Go to page ${i + 1}`}
            aria-current={isActive ? 'page' : undefined}
            onClick={() => setPage(i)}
            className={cn(
              'h-2 rounded-full transition-all duration-300 ease-out',
              isActive
                ? 'bg-foreground w-6'
                : 'bg-foreground/25 hover:bg-foreground/40 w-2',
            )}
          />
        )
      })}
    </nav>
  )
}
```