Repository: tabler/tabler
Pull request #2384: Enhance pagination component with new styles and documentation
Author: login: codecalm
Created: 2025-05-17T14:31:03Z | Merged: 2025-05-17T15:04:59Z



Diff:
diff --git a/.changeset/eighty-peas-retire.md b/.changeset/eighty-peas-retire.md
new file mode 100644
index 0000000000..90a9881a73
--- /dev/null
+++ b/.changeset/eighty-peas-retire.md
@@ -0,0 +1,7 @@
+---
+"@tabler/core": patch
+"@tabler/preview": patch
+"@tabler/docs": patch
+---
+
+Enhance pagination component with new styles
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index a9b0eeba05..426fdd280f 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -839,13 +839,17 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
-$pagination-border-width: 0 !default;
-$pagination-padding-y: 0.25rem !default;
+$pagination-border-width: 1px !default;
+$pagination-border-color: transparent !default;
+$pagination-padding-y: calc(0.25rem + 1px) !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}gray-500) !default;
+$pagination-color: var(--#{$prefix}body-color) !default;
 $pagination-bg: transparent !default;
+$pagination-hover-bg: var(--#{$prefix}active-bg) !default;
+$pagination-hover-border-color: var(--#{$prefix}pagination-border-color) !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
+$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
 
 $pagination-active-bg: var(--#{$prefix}primary) !default;
 $pagination-active-border-color: var(--#{$prefix}primary) !default;
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index 4a7b82dace..9c971835bf 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -1,4 +1,5 @@
 .pagination {
+  margin: 0;
   --#{$prefix}pagination-gap: .25rem;
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
@@ -6,21 +7,22 @@
 }
 
 .page-link {
-  min-width: 1.75rem;
-  border-radius: var(--#{$prefix}border-radius);
+  min-width: 2rem;
+  border-radius: var(--#{$prefix}pagination-border-radius);
+
+  &:hover {
+    background: var(--#{$prefix}pagination-hover-bg);
+  }
+}
+
+.page-text {
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 
 .page-item {
   text-align: center;
 
-  &:not(.active) {
-    .page-link {
-      &:hover {
-        background: transparent;
-      }
-    }
-  }
-
   &.page-prev,
   &.page-next {
     flex: 0 0 50%;
@@ -56,4 +58,14 @@
   .page-item.disabled & {
     color: $pagination-disabled-color;
   }
+}
+
+.pagination-outline {
+  --#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}pagination-border-width: 1px;
+}
+
+.pagination-circle {
+  --#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
 }
\ No newline at end of file
diff --git a/docs/content/ui/components/dropzone.md b/docs/content/ui/components/dropzone.md
index b26686d265..8060cf012a 100644
--- a/docs/content/ui/components/dropzone.md
+++ b/docs/content/ui/components/dropzone.md
@@ -2,6 +2,7 @@
 title: Dropzone
 summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
 description: Drag-and-drop file upload tool.
+docs-libs: dropzone
 ---
 
 ## Basic usage
diff --git a/docs/content/ui/components/pagination.md b/docs/content/ui/components/pagination.md
new file mode 100644
index 0000000000..2c0bcccacf
--- /dev/null
+++ b/docs/content/ui/components/pagination.md
@@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## With First and Last links
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" first-last %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Offset
+
+If the count of pages is too large, you can use offset to show only a few pages at a time. 
+
+{% capture html -%}
+{% include "ui/pagination.html" offset=3 count=20 %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Button With Text
+
+When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" text %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Outline version
+
+If you want to use outline version of pagination, you can use `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-outline" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Circle version
+
+If you want to use circle version of pagination, you can use `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
+
+{% include "ui/pagination.html" class="pagination-circle" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical separated %}
\ No newline at end of file
diff --git a/preview/pages/pagination.html b/preview/pages/pagination.html
index 2bd97e5810..b955c4df5e 100644
--- a/preview/pages/pagination.html
+++ b/preview/pages/pagination.html
@@ -11,7 +11,7 @@
 		<div class="card">
 			<div class="card-body">
 				{% include "ui/pagination.html" %}
-				{% include "ui/pagination.html" icons=true %}
+				{% include "ui/pagination.html" text=true %}
 			</div>
 		</div>
 	</div>
diff --git a/shared/includes/docs/example.html b/shared/includes/docs/example.html
index d1703ce450..dc489b556c 100644
--- a/shared/includes/docs/example.html
+++ b/shared/includes/docs/example.html
@@ -1,7 +1,7 @@
 <!--EXAMPLE-->
 <div
 	class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
-	{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
+	{%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} d-flex flex-fill flex-wrap gap-2 justify-content-center{% if include.vertical %} align-items-center flex-column{% else %} justify-content-center{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
 		{{ include.html | remove-href }}
 	{%- unless include.raw -%}</div>{%- endunless -%}
 </div>
diff --git a/shared/includes/docs/navbar.html b/shared/includes/docs/navbar.html
index a690bba84e..783848792d 100644
--- a/shared/includes/docs/navbar.html
+++ b/shared/includes/docs/navbar.html
@@ -33,10 +33,15 @@
 						</a>
 					</li>
 					<li class="nav-item">
-						<a href="{{ site.githubUrl }}" class="btn btn-icon btn-github" target="_blank">
+						<a href="{{ site.githubUrl }}" class="btn btn-icon" target="_blank">
 							{% include "ui/icon.html" icon="brand-github" %}
 						</a>
 					</li>
+					<li class="nav-item">
+						<a href="{{ site.previewUrl }}" class="btn btn-primary" target="_blank">
+							{% include "ui/icon.html" icon="eye" %} Preview
+						</a>
+					</li>
 				</ul>
 			</div>
 		</div>
diff --git a/shared/includes/ui/pagination.html b/shared/includes/ui/pagination.html
index 3cd357c94d..d07845d6eb 100644
--- a/shared/includes/ui/pagination.html
+++ b/shared/includes/ui/pagination.html
@@ -1,30 +1,55 @@
-{% assign count = include.count | default: 5 %}
-{% assign active-item = include.active-item | default: 3 %}
-<ul class="pagination {{ include.class }}">
-   <li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
-      <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
-         {% if include.prev-description %}
-            <div class="page-item-subtitle">previous</div>
-            <div class="page-item-title">{{ include.prev-description }}</div>
-         {% else %}
-            {% if include.icons %}{% include "ui/icon.html" icon="chevron-left" %}{% else %}{% include "ui/icon.html" icon="chevron-left" %} prev{% endif %}
-         {% endif %}
-      </a>
-   </li>
-
-   {% for i in (1..count) %}
-   <li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
-   {% endfor %}
-
+{% assign count = include.count | default: 5 -%}
+{% assign offset = include.offset | default: count -%}
+{% assign count-offset = count | minus: offset | plus: 1 -%}
+{% assign active-item = include.active-item | default: 3 -%}
+<ul class="pagination{% if include.class %} {{ include.class }}{% endif %}">
+	{% if include.first-last -%}
+	<li class="page-item disabled">
+		<a class="page-link{% if include.text %} page-text{% endif %}" href="#" tabindex="-1" aria-disabled="true">
+			{% unless include.text %}{% include "ui/icon.html" icon="chevrons-left" %}{% else %}Previous{% endunless -%}
+		</a>
+	</li>
+	{% endif -%}
+	<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
+		<a class="page-link{% if include.text %} page-text{% endif %}" href="#" tabindex="-1" aria-disabled="true">
+			{% if include.prev-description -%}
+			<div class="page-item-subtitle">previous</div>
+			<div class="page-item-title">{{ include.prev-description }}</div>
+			{% else -%}
+			{% unless include.text %}{% include "ui/icon.html" icon="chevron-left" %}{% else %}Previous{% endunless -%}
+			{% endif %}
+		</a>
+	</li>
+	{% for i in (1..offset) -%}
+	<li class="page-item{% if i == active-item %} active{% endif %}">
+		<a class="page-link" href="#">{{ i }}</a>
+	</li>
+	{% endfor -%}
+	{% if offset < count -%}
+	<li class="page-item">
+		<span class="page-link disabled">&hellip;</span>
+	</li>
+	{% for i in (count-offset..count) -%}
+	<li class="page-item{% if i == active-item %} active{% endif %}">
+		<a class="page-link" href="#">{{ i }}</a>
+	</li>
+	{% endfor -%}
+	{% endif %}
    <li class="page-item{% if include.prev-description %} page-next{% endif %}">
-      <a class="page-link" href="#">
-
-         {% if include.next-description %}
+      <a class="page-link{% if include.text %} page-text{% endif %}" href="#">
+         {% if include.next-description -%}
             <div class="page-item-subtitle">next</div>
             <div class="page-item-title">{{ include.next-description }}</div>
-         {% else %}
-            {% if include.icons %}{% include "ui/icon.html" icon="chevron-right" %}{% else %}next {% include "ui/icon.html" icon="chevron-right" %}{% endif %}
-         {% endif %}
+         {% else -%}
+            {% unless include.text %}{% include "ui/icon.html" icon="chevron-right" %}{% else %}Next{% endunless %}
+         {% endif -%}
       </a>
    </li>
+	{% if include.first-last -%}
+	<li class="page-item">
+		<a class="page-link{% if include.text %} page-text{% endif %}" href="#">
+			{% unless include.text %}{% include "ui/icon.html" icon="chevrons-right" %}{% else %}Next{% endunless %}
+		</a>
+	</li>
+	{% endif -%}
 </ul>


Reviews:
user: login: ethancrawford
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-17T15:36:36Z

Review comments:
diff_hunk: @@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
path: docs/content/ui/components/pagination.md
user: login: ethancrawford
body: ```suggestion
Use slightly customized pagination with previous and next icon links:
```
created_at: 2025-05-17T14:33:36Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## With First and Last links
+
+Use slightly customized pagination with previouse and next icon links:
path: docs/content/ui/components/pagination.md
user: login: ethancrawford
body: Same typo as above.
```suggestion
Use slightly customized pagination with previous and next icon links:
```
*However* - did this one also need to mention the first and last links, since that is what is different about it from the first example?
created_at: 2025-05-17T14:34:00Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## With First and Last links
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" first-last %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Offset
+
+If the count of pages is too large, you can use offset to show only a few pages at a time. 
+
+{% capture html -%}
+{% include "ui/pagination.html" offset=3 count=20 %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Button With Text
+
+When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" text %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Outline version
+
+If you want to use outline version of pagination, you can use `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
path: docs/content/ui/components/pagination.md
user: login: ethancrawford
body: ```suggestion
If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
```
created_at: 2025-05-17T14:49:18Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## With First and Last links
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" first-last %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Offset
+
+If the count of pages is too large, you can use offset to show only a few pages at a time. 
+
+{% capture html -%}
+{% include "ui/pagination.html" offset=3 count=20 %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Button With Text
+
+When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" text %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Outline version
+
+If you want to use outline version of pagination, you can use `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-outline" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Circle version
+
+If you want to use circle version of pagination, you can use `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
path: docs/content/ui/components/pagination.md
user: login: ethancrawford
body: I'd suggest adding a note about outline version to this, and then swap the order of the two circle examples below it.
```suggestion
If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
```
created_at: 2025-05-17T15:32:54Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,60 @@
+---
+title: Pagination
+summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
+---
+
+## Basic Example
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## With First and Last links
+
+Use slightly customized pagination with previouse and next icon links:
+
+{% capture html -%}
+{% include "ui/pagination.html" first-last %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Offset
+
+If the count of pages is too large, you can use offset to show only a few pages at a time. 
+
+{% capture html -%}
+{% include "ui/pagination.html" offset=3 count=20 %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Button With Text
+
+When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" text %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Outline version
+
+If you want to use outline version of pagination, you can use `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-outline" %}
+{%- endcapture %}
+{% include "docs/example.html" html=html centered vertical %}
+
+## Circle version
+
+If you want to use circle version of pagination, you can use `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
+
+{% capture html -%}
+{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
path: docs/content/ui/components/pagination.md
user: login: ethancrawford
body: As mentioned above, I'd suggest swapping this line and line 58 (the 'plain' circle example). That way you're showing the basic circle first, and then adding on the outline to it.
created_at: 2025-05-17T15:34:48Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-17T14:31:06Z
body: ###  🦋  Changeset detected

Latest commit: 8c95cfe4f31c79ac231990e2c5682879354a44e5

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 3 packages</summary>

  | Name            | Type  |
| --------------- | ----- |
| @tabler/core    | Patch |
| @tabler/preview | Patch |
| @tabler/docs    | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/tabler/tabler/new/dev-pagination?filename=.changeset/tender-ties-build.md&value=---%0A%22%40tabler%2Fcore%22%3A%20patch%0A%22%40tabler%2Fpreview%22%3A%20patch%0A%22%40tabler%2Fdocs%22%3A%20patch%0A---%0A%0AEnhance%20pagination%20component%20with%20new%20styles%20and%20documentation%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-17T14:31:08Z
body: [vc]: #Bru/bjwyzZBeq7ro9WuJzr2nwnYXAUsBQqGulL+ZVCs=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0YWJsZXIiLCJyb290RGlyZWN0b3J5IjoicHJldmlldyIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS90YWJsZXItaW8vdGFibGVyL015QU1ZSEo5aGNBY0IzTVE1eldGQ2o1OVpEaVIiLCJwcmV2aWV3VXJsIjoidGFibGVyLWdpdC1kZXYtcGFnaW5hdGlvbi10YWJsZXItaW8udmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCJ9LHsibmFtZSI6InRhYmxlci1kb2NzIiwicm9vdERpcmVjdG9yeSI6ImRvY3MiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdGFibGVyLWlvL3RhYmxlci1kb2NzL0Frc0o1V2FDNlR3eFEzSkhYaG9XbmtESHBDeTUiLCJwcmV2aWV3VXJsIjoidGFibGVyLWRvY3MtZ2l0LWRldi1wYWdpbmF0aW9uLXRhYmxlci1pby52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Updated (UTC) |
| :--- | :----- | :------ | :------ |
| **tabler** | ✅ Ready ([Inspect](https://vercel.com/tabler-io/tabler/MyAMYHJ9hcAcB3MQ5zWFCj59ZDiR)) | [Visit Preview](https://tabler-git-dev-pagination-tabler-io.vercel.app) | May 17, 2025 2:46pm |
| **tabler-docs** | ✅ Ready ([Inspect](https://vercel.com/tabler-io/tabler-docs/AksJ5WaC6TwxQ3JHXhoWnkDHpCy5)) | [Visit Preview](https://tabler-docs-git-dev-pagination-tabler-io.vercel.app) | May 17, 2025 2:46pm |



author_association: NONE
user: login: codecalm
created_at: 2025-05-17T19:29:04Z
body: @ethancrawford I've added your changes to `dev` branch here: 0d59e2f13afb7fbba1da33645a6509dc6ca43d73 
author_association: MEMBER