Displays a hierarchy of links to the current page or resource in an application.
<ol class="kt-pagination">
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-left rtl:rotate-180"
aria-hidden="true"
>
<path d="m15 18-6-6 6-6"></path>
</svg>
Preview</a
>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost">1</a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost active">2</a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost">3</a>
</li>
<li class="kt-pagination-ellipsis">
<svg
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"
class="lucide lucide-ellipsis"
aria-hidden="true"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-ghost"
>Next
<svg
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"
class="lucide lucide-chevron-right rtl:rotate-180"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path></svg
></a>
</li>
</ol>
<ol class="kt-pagination">
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-first rtl:rotate-180"
aria-hidden="true"
>
<path d="m17 18-6-6 6-6"></path>
<path d="M7 6v12"></path></svg
></a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-left rtl:rotate-180"
aria-hidden="true"
>
<path d="m15 18-6-6 6-6"></path></svg
></a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost">1</a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost active">2</a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost">3</a>
</li>
<li class="kt-pagination-ellipsis">
<svg
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"
class="lucide lucide-ellipsis"
aria-hidden="true"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-right rtl:rotate-180"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path></svg
></a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-last rtl:rotate-180"
aria-hidden="true"
>
<path d="m7 18 6-6-6-6"></path>
<path d="M17 6v12"></path></svg
></a>
</li>
</ol>
<div class="flex">
<div class="kt-card">
<div class="kt-card-content p-1">
<ol class="kt-pagination">
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-first rtl:rotate-180"
aria-hidden="true"
>
<path d="m17 18-6-6 6-6"></path>
<path d="M7 6v12"></path></svg
></a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-left rtl:rotate-180"
aria-hidden="true"
>
<path d="m15 18-6-6 6-6"></path></svg
></a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost">1</a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost active">2</a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost">3</a>
</li>
<li class="kt-pagination-ellipsis">
<svg
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"
class="lucide lucide-ellipsis"
aria-hidden="true"
>
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-right rtl:rotate-180"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6"></path></svg
></a>
</li>
<li class="kt-pagination-item">
<a class="kt-btn kt-btn-icon kt-btn-ghost"
><svg
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"
class="lucide lucide-chevron-last rtl:rotate-180"
aria-hidden="true"
>
<path d="m7 18 6-6-6-6"></path>
<path d="M17 6v12"></path></svg
></a>
</li>
</ol>
</div>
</div>
</div>
On This Page