Docs
Navigations
Pagination

Tailwind CSS Pagination

Build Tailwind CSS pagination components with icons, active and disabled states, bordered, compact, full-width, rounded, page jumper, and dropdown variants.

Default pagination

Use a connected pagination bar to move between pages with large click targets and a clear active state.

Pagination with icons

Swap text labels for icons when space is tight, and keep accessible names in place with the right aria attributes.

Disabled and active states

Use active and disabled states to show the current page and unavailable navigation actions.

Bordered pagination

Add borders around each item for a more defined pagination control.

Bordered group pagination

Use grouped borders to create a single connected pagination control.

Compact pagination

Use the compact variant when pagination needs to fit into tighter layouts.

Pair compact pagination controls with tooltips to expose extra context without adding visible labels.

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block">
                                <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block">
                                <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex items-center -space-x-px" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            <div class="hs-tooltip inline-block border border-line-2">
                              <button type="button" class="hs-tooltip-toggle group min-h-9 min-w-9 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                <span class="group-hover:hidden text-xs">•••</span>
                                <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                  Next 4 pages
                                </span>
                              </button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

Page jumper

Add an inline page input when people need to jump directly to a specific page.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="flex justify-center sm:justify-start items-center gap-x-2">
                              <span class="text-sm text-foreground whitespace-nowrap">
                                Go to
                              </span>
                              <input type="number" class="min-h-9.5 py-2 px-2.5 block w-12 bg-layer border-layer-line rounded-lg text-sm text-center text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" style="-moz-appearance: textfield;">
                              <span class="text-sm text-foreground whitespace-nowrap">
                                page
                              </span>
                            </div>
                            
                          </div>

<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
                            
                            <nav class="flex items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-9 min-w-9 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Use a dropdown to reveal more page options without expanding the control by default.

<div class="hs-dropdown relative [--placement:top-left] inline-flex justify-center sm:justify-start">
                              <button id="hs-pagination-dropdown" type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg border border-line-2 text-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                5 page
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 hidden z-50 transition-[margin,opacity] opacity-0 duration-300 mb-2 bg-dropdown border border-dropdown-line shadow-md rounded-lg p-1 space-y-0.5" role="menu" aria-orientation="vertical" aria-labelledby="hs-pagination-dropdown">
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  5 page
                                  <svg class="ms-auto shrink-0 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                </button>
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  8 page
                                </button>
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  10 page
                                </button>
                              </div>
                            </div>
                            
                          </div>

<div class="grid justify-center sm:flex sm:justify-between sm:items-center gap-1">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="hs-dropdown relative [--placement:top-left] inline-flex justify-center sm:justify-start">
                              <button id="hs-bordered-pagination-dropdown" type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg border border-line-2 text-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                5 page
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 hidden z-50 transition-[margin,opacity] opacity-0 duration-300 mb-2 bg-dropdown border border-dropdown-line shadow-md rounded-lg p-1 space-y-0.5" role="menu" aria-orientation="vertical" aria-labelledby="hs-bordered-pagination-dropdown">
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  5 page
                                  <svg class="ms-auto shrink-0 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                </button>
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  8 page
                                </button>
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  10 page
                                </button>
                              </div>
                            </div>
                            
                          </div>

<div class="hs-dropdown relative [--placement:top-left] inline-flex justify-center sm:justify-start">
                              <button id="hs-bordered-group-pagination-dropdown" type="button" class="py-1.5 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg border border-line-2 text-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
                                5 page
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                              </button>
                              <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-48 hidden z-50 transition-[margin,opacity] opacity-0 duration-300 mb-2 bg-dropdown border border-dropdown-line shadow-md rounded-lg p-1 space-y-0.5" role="menu" aria-orientation="vertical" aria-labelledby="hs-bordered-group-pagination-dropdown">
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  5 page
                                  <svg class="ms-auto shrink-0 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                </button>
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  8 page
                                </button>
                                <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                  10 page
                                </button>
                              </div>
                            </div>
                            
                          </div>

Full-width pagination

Stretch pagination across the available width when it needs to line up with cards, tables, or toolbars.

<nav class="flex justify-between items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span aria-hidden="true" class="hidden sm:block">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                              <span aria-hidden="true" class="hidden sm:block">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-between items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span aria-hidden="true" class="hidden sm:block">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                              <span aria-hidden="true" class="hidden sm:block">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<nav class="flex justify-between items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span aria-hidden="true" class="hidden sm:block">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                              <span aria-hidden="true" class="hidden sm:block">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-between items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span aria-hidden="true" class="hidden sm:block">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                              <span aria-hidden="true" class="hidden sm:block">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

Pagination alignment

Centered pagination

Center pagination within its container with justify-center.

<nav class="flex justify-center items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-center items-center -space-x-px" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-center items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<nav class="flex justify-center items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-center items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

Right-aligned pagination

Align pagination to the end of the row with justify-end.

<nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">of</span>
                              <span class="min-h-9.5 flex justify-center items-center text-muted-foreground-1 py-2 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

Sizes

Default sizes

Preview the default pagination style from small to large sizes.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="flex items-center gap-x-2">
                                <span class="text-sm text-foreground whitespace-nowrap">
                                  Go to
                                </span>
                                <input type="number" class="min-h-8 py-1 px-2.5 block w-12 bg-layer border-layer-line rounded-lg text-sm text-center text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" style="-moz-appearance: textfield;">
                                <span class="text-sm text-foreground whitespace-nowrap">
                                  page
                                </span>
                              </div>
                              
                            </div>
                          </div>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="flex items-center gap-x-2">
                                <span class="text-sm text-foreground whitespace-nowrap">
                                  Go to
                                </span>
                                <input type="number" class="min-h-9.5 py-2 px-2.5 block w-12 bg-layer border-layer-line rounded-lg text-sm text-center text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" style="-moz-appearance: textfield;">
                                <span class="text-sm text-foreground whitespace-nowrap">
                                  page
                                </span>
                              </div>
                              
                            </div>
                          </div>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="flex items-center gap-x-2">
                                <span class="text-sm text-foreground whitespace-nowrap">
                                  Go to
                                </span>
                                <input type="number" class="min-h-11.5 p-3 block w-12 bg-layer border-layer-line rounded-lg text-sm text-center text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" style="-moz-appearance: textfield;">
                                <span class="text-sm text-foreground whitespace-nowrap">
                                  page
                                </span>
                              </div>
                              
                            </div>
                          </div>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Bordered sizes

Preview the bordered pagination style from small to large sizes.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground py-1 px-2.5 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-lg focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-4 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground py-1 px-2.5 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-lg focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-4 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-lg focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Bordered group sizes

Preview the bordered group pagination style from small to large sizes.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-7.5 min-w-7.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="text-[10px] group-hover:hidden">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-9 min-w-9 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-11 min-w-11 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-3 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-7.5 min-w-7.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="text-[10px] group-hover:hidden">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-11 min-w-11 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-3 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-lg last:rounded-e-lg focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-lg last:rounded-e-lg border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Compact sizes

Preview the compact pagination style from small to large sizes.

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-11.5 min-w-11.5 py-4 px-4 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-11.5 min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-11.5 flex justify-center items-center text-muted-foreground-1 py-3 px-1.5 text-sm">of</span>
                              <span class="min-h-11.5 flex justify-center items-center text-muted-foreground-1 py-3 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-11.5 min-w-11.5 py-4 px-4 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground py-1 px-3 text-sm rounded-lg focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-8 flex justify-center items-center text-muted-foreground-1 py-1.5 px-1.5 text-sm">of</span>
                              <span class="min-h-8 flex justify-center items-center text-muted-foreground-1 py-1.5 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-lg text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

Rounded shapes

Default rounded sizes

Preview the default rounded pagination style from small to large sizes.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground py-3 px-4 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center text-foreground hover:bg-muted-hover py-1.5 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-1.5 px-2 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground py-2 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground py-3 px-4 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 py-3 px-4 inline-flex jusify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Bordered rounded sizes

Preview the bordered rounded pagination style from small to large sizes.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground py-1 px-2.5 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-4 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground py-1 px-2.5 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-8 min-w-8 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="text-[10px] group-hover:hidden">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground py-2 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-9.5 min-w-9.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-2 px-3 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex items-center gap-x-1" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <div class="flex items-center gap-x-1">
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-4 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                                <div class="hs-tooltip inline-block">
                                  <button type="button" class="hs-tooltip-toggle group min-h-11.5 min-w-11.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm rounded-full focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                    <span class="group-hover:hidden text-xs">•••</span>
                                    <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      Next 4 pages
                                    </span>
                                  </button>
                                </div>
                                <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-transparent text-foreground hover:bg-muted-hover py-3 px-4 text-sm rounded-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-2 text-sm rounded-full border border-transparent text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Bordered group rounded sizes

Preview the bordered group rounded pagination style from small to large sizes.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-2xl mx-auto mt-4 space-y-4">
                          <div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-7.5 min-w-7.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="text-[10px] group-hover:hidden">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-9 min-w-9 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-11 min-w-11 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-3 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-7.5 min-w-7.5 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-1 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="text-[10px] group-hover:hidden">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-1 px-2.5 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-9 min-w-9 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-2 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-9.5 min-w-9.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-2 px-3 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-9.5 min-w-9.5 py-2 px-2.5 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

<div class="grid justify-center sm:flex sm:justify-start sm:items-center gap-2">
                            
                            <nav class="flex justify-end items-center -space-x-px" aria-label="Pagination">
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                                <span class="sr-only">Previous</span>
                              </button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center bg-surface-1 text-foreground border border-line-2 py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-current="page">1</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">2</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">3</button>
                              <div class="hs-tooltip inline-block border border-line-2">
                                <button type="button" class="hs-tooltip-toggle group min-h-11 min-w-11 flex justify-center items-center text-muted-foreground hover:text-primary-hover p-3 text-sm focus:outline-hidden focus:text-primary-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <span class="group-hover:hidden text-xs">•••</span>
                                  <svg class="group-hover:block hidden shrink-0 size-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path></svg>
                                  <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs hidden" role="tooltip">
                                    Next 4 pages
                                  </span>
                                </button>
                              </div>
                              <button type="button" class="min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground hover:bg-muted-hover py-3 px-4 text-sm first:rounded-s-full last:rounded-e-full focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none">8</button>
                              <button type="button" class="min-h-11.5 min-w-11.5 p-3 inline-flex justify-center items-center gap-x-1.5 text-sm first:rounded-s-full last:rounded-e-full border border-line-2 text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                                <span class="sr-only">Next</span>
                                <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                              </button>
                            </nav>

Compact rounded sizes

Preview the compact rounded pagination style from small to large sizes.

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-11.5 min-w-11.5 py-4 px-4 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-11.5 min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-11.5 flex justify-center items-center text-muted-foreground-1 py-3 px-1.5 text-sm">of</span>
                              <span class="min-h-11.5 flex justify-center items-center text-muted-foreground-1 py-3 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-11.5 min-w-11.5 py-4 px-4 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>
                          
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-8 min-w-8 flex justify-center items-center border border-line-2 text-foreground py-1 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-8 flex justify-center items-center text-muted-foreground-1 py-1.5 px-1.5 text-sm">of</span>
                              <span class="min-h-8 flex justify-center items-center text-muted-foreground-1 py-1.5 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-8 min-w-8 py-2 px-2 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>

<nav class="flex items-center gap-x-1" aria-label="Pagination">
                            <button type="button" class="min-h-11.5 min-w-11.5 py-4 px-4 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Previous">
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
                              <span class="sr-only">Previous</span>
                            </button>
                            <div class="flex items-center gap-x-1">
                              <span class="min-h-11.5 min-h-11.5 min-w-11.5 flex justify-center items-center border border-line-2 text-foreground py-3 px-3 text-sm rounded-full focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">1</span>
                              <span class="min-h-11.5 flex justify-center items-center text-muted-foreground-1 py-3 px-1.5 text-sm">of</span>
                              <span class="min-h-11.5 flex justify-center items-center text-muted-foreground-1 py-3 px-1.5 text-sm">3</span>
                            </div>
                            <button type="button" class="min-h-11.5 min-w-11.5 py-4 px-4 inline-flex justify-center items-center gap-x-2 text-sm rounded-full text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Next">
                              <span class="sr-only">Next</span>
                              <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </button>
                          </nav>