Vue Interface

Appearance

Pagination ​

The pagination utility class provides a flexible and customizable pagination component system with customizable color variants and sizes.

Installation ​

bash
pnpm i @vue-interface/pagination
bash
yarn add @vue-interface/pagination
bash
npm i @vue-interface/pagination
bash
bun i @vue-interface/pagination

Tailwind Setup ​

css
@import '@vue-interface/pagination/index.css';

Basic Usage ​

To create a pagination component, use the parent pagination class and then add the pagination-link class to the links in the pagination. Use the active class to indicate the current page and disabled class for non-clickable links.

html
<div class="pagination">
    <a href="#" class="pagination-link">«</a>
    <a href="#" class="pagination-link">1</a>
    <div class="pagination-link active disabled">2</div>
    <a href="#" class="pagination-link">3</a>
    <div class="pagination-link disabled">...</div>
    <a href="#" class="pagination-link">4</a>
    <a href="#" class="pagination-link active">5</a>
    <a href="#" class="pagination-link">6</a>
    <div class="pagination-link disabled">...</div>
    <a href="#" class="pagination-link">7</a>
    <a href="#" class="pagination-link">8</a>
    <a href="#" class="pagination-link">9</a>
    <a href="#" class="pagination-link">»</a>
</div>

Sizes ​

Customize the size of a pagination using a predetermined size, tailwind's numeric sizing classes, or an arbitrary CSS length unit.

Predetermined Sizes ​

The size can be customized using predetermined size classes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Use the syntax: pagination-[size].

Show Code
html
<div class="pagination pagination-xs">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-sm">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-md">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-lg">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-xl">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-2xl">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-3xl">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-4xl">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-5xl">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>

Tailwind Sizes ​

For more granular control over pagination sizes, use Tailwind's numeric sizing scale classes: pagination-1 - pagination-96.

Show Code
html
<div class="pagination pagination-4">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-5">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-6">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>

Arbitrary sizes ​

For precise sizing, specify exact pixel values using the syntax pagination-[Npx] or any other CSS length units (rem, em, mm, etc.).

Show Code
html
<div class="pagination pagination-[16px]">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-[1.5rem]">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>

Variants ​

The pagination component supports eight standard color variants: primary, secondary, success, danger, warning, info, light, dark. Use the syntax: pagination-[variant].

Show Code
html
<div class="pagination pagination-primary">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-secondary">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-success">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-danger">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-warning">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-info">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-light">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-dark">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>

Custom Colors ​

Customize the color of the pagination component with the Tailwind color palette by using the class: pagination-[color].

Show Code
html
<div class="pagination pagination-green-500">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-amber-500">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-yellow-500">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-500">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>

Color Shades ​

Color shades automatically invert the text color for light and dark colors.

Show Code
html
<div class="pagination pagination-red-50">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-100">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-200">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-300">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-400">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-500">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-600">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-700">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-800">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-900">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>
<div class="pagination pagination-red-950">
    <a href="#" class="pagination-link disabled">«</a>
    <a href="#" class="pagination-link active">1</a>
    <a href="#" class="pagination-link">2</a>
    <a href="#" class="pagination-link">3</a>
    <a href="#" class="pagination-link">»</a>
</div>