diff --git a/projects/lib/pagination/index.ts b/projects/lib/pagination/index.ts
new file mode 100644
index 0000000..253b52a
--- /dev/null
+++ b/projects/lib/pagination/index.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+export * from './public-api';
diff --git a/projects/lib/pagination/ng-package.json b/projects/lib/pagination/ng-package.json
new file mode 100644
index 0000000..789c95e
--- /dev/null
+++ b/projects/lib/pagination/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}
diff --git a/projects/lib/pagination/pagination.component.html b/projects/lib/pagination/pagination.component.html
new file mode 100644
index 0000000..f1e2995
--- /dev/null
+++ b/projects/lib/pagination/pagination.component.html
@@ -0,0 +1,46 @@
+<div class="wr-pagination-container" [class]="'wr-pagination--' + position()">
+  @if (showTotal()) {
+    <span class="wr-pagination-total">
+      {{ currentRange() }}
+    </span>
+  }
+
+  <div class="wr-pagination-items">
+    <wr-btn
+      outlined
+      [disabled]="disabled() || current() === 1"
+      (click)="onPageChange(current() - 1)"
+      icon="arrow-back"
+    ></wr-btn>
+
+    @for (page of pages(); track page) {
+      @if (page === '...') {
+        <span class="wr-pagination-ellipsis">...</span>
+      } @else {
+        <wr-btn
+          [outlined]="!isCurrentPage(page)"
+          [color]="isCurrentPage(page) ? 'primary' : 'medium'"
+          [disabled]="disabled()"
+          (click)="onPageChange(page)"
+        >
+          {{ page }}
+        </wr-btn>
+      }
+    }
+
+    <wr-btn
+      outlined
+      [disabled]="disabled() || current() === totalPages()"
+      (click)="onPageChange(current() + 1)"
+      icon="arrow-forward"
+    ></wr-btn>
+  </div>
+
+  @if (showSizeChanger()) {
+    <wr-select [disabled]="disabled()" [ngModel]="pageSize()" (ngModelChange)="onPageSizeChange($event)">
+      @for (option of pageSizeOptions(); track option) {
+        <wr-option [value]="option" [label]="String(option)"></wr-option>
+      }
+    </wr-select>
+  }
+</div>
diff --git a/projects/lib/pagination/pagination.component.ts b/projects/lib/pagination/pagination.component.ts
new file mode 100644
index 0000000..1ba608f
--- /dev/null
+++ b/projects/lib/pagination/pagination.component.ts
@@ -0,0 +1,130 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  booleanAttribute,
+  computed,
+  input,
+  model,
+  numberAttribute,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { WrButtonComponent } from 'ngwr/button';
+import { provideWrIcons, arrowBack, arrowForward } from 'ngwr/icon';
+import { WrSelectComponent } from 'ngwr/select';
+import { WrOptionComponent } from 'ngwr/select/select-option.component';
+
+import { WrPaginationPosition } from './pagination.types';
+
+@Component({
+  selector: 'wr-pagination',
+  standalone: true,
+  imports: [WrButtonComponent, WrSelectComponent, WrOptionComponent, FormsModule],
+  templateUrl: './pagination.component.html',
+  styleUrl: './pagination.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  providers: [provideWrIcons([arrowBack, arrowForward])],
+  host: {
+    class: 'wr-pagination',
+    '[class.wr-pagination--disabled]': 'disabled()',
+  },
+})
+export class WrPaginationComponent {
+  total = input<number, number>(0, { transform: numberAttribute });
+  pageSize = model<number>(10);
+  current = model<number>(1);
+  position = input<WrPaginationPosition>('start');
+  disabled = input<boolean, boolean>(false, { transform: booleanAttribute });
+  showSizeChanger = input<boolean, boolean>(false, { transform: booleanAttribute });
+  showTotal = input<boolean, boolean>(false, { transform: booleanAttribute });
+  pageSizeOptions = input<number[]>([10, 20, 50, 100]);
+  ofLabel = input<string>('of');
+
+  protected readonly totalPages = computed(() => Math.ceil(this.total() / this.pageSize()));
+
+  protected readonly currentRange = computed(() => {
+    const start = (this.current() - 1) * this.pageSize() + 1;
+    const end = Math.min(this.current() * this.pageSize(), this.total());
+    return `${start}-${end} ${this.ofLabel} ${this.total()}`;
+  });
+
+  protected readonly pages = computed(() => {
+    const total = this.totalPages();
+    const current = this.current();
+    const items: (number | '...')[] = [];
+
+    if (total <= 7) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    items.push(1);
+
+    if (current > 4) {
+      items.push('...');
+    }
+
+    let start: number;
+    let end: number;
+
+    if (current <= 4) {
+      start = 2;
+      end = 5;
+    } else if (current >= total - 3) {
+      start = total - 4;
+      end = total - 1;
+    } else {
+      start = current - 2;
+      end = current + 2;
+    }
+
+    for (let i = start; i <= end; i++) {
+      items.push(i);
+    }
+
+    if (current < total - 3) {
+      items.push('...');
+    }
+
+    if (end !== total) {
+      items.push(total);
+    }
+
+    return items;
+  });
+
+  protected isCurrentPage(page: number): boolean {
+    return this.current() === page;
+  }
+
+  onPageChange(page: number): void {
+    if (this.disabled() || page === this.current() || page < 1 || page > this.totalPages()) {
+      return;
+    }
+
+    this.current.set(page);
+  }
+
+  onPageSizeChange(size: number): void {
+    if (this.disabled() || size === this.pageSize()) {
+      return;
+    }
+
+    this.pageSize.set(size);
+
+    const newTotalPages = Math.ceil(this.total() / size);
+    if (this.current() > newTotalPages) {
+      this.onPageChange(newTotalPages);
+    }
+  }
+
+  protected readonly String = String;
+}
diff --git a/projects/lib/pagination/pagination.types.ts b/projects/lib/pagination/pagination.types.ts
new file mode 100644
index 0000000..9994e1e
--- /dev/null
+++ b/projects/lib/pagination/pagination.types.ts
@@ -0,0 +1,8 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+export type WrPaginationPosition = 'start' | 'center' | 'end';
diff --git a/projects/lib/pagination/public-api.ts b/projects/lib/pagination/public-api.ts
new file mode 100644
index 0000000..fe6d42c
--- /dev/null
+++ b/projects/lib/pagination/public-api.ts
@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+export * from './pagination.types';
+export * from './pagination.component';
diff --git a/projects/lib/pagination/styles/_index.scss b/projects/lib/pagination/styles/_index.scss
new file mode 100644
index 0000000..b15afda
--- /dev/null
+++ b/projects/lib/pagination/styles/_index.scss
@@ -0,0 +1,56 @@
+@forward "./vars";
+
+.wr-pagination {
+  display: block;
+
+  &-container {
+    display: flex;
+    align-items: center;
+    gap: var(--wr-pagination-gap);
+  }
+
+  &--start {
+    justify-content: flex-start;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--end {
+    justify-content: flex-end;
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  &-total {
+    color: var(--wr-pagination-total-color);
+    font-size: var(--wr-pagination-font-size);
+  }
+
+  &-items {
+    display: flex;
+    align-items: center;
+    gap: var(--wr-pagination-items-gap);
+  }
+
+  &-ellipsis {
+    color: var(--wr-pagination-ellipsis-color);
+    padding: 0 var(--wr-pagination-item-padding);
+    user-select: none;
+  }
+
+  wr-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--wr-pagination-item-size);
+    height: var(--wr-pagination-item-size);
+    padding: 0;
+    gap: 0;
+    text-align: center;
+  }
+}
diff --git a/projects/lib/pagination/styles/vars.scss b/projects/lib/pagination/styles/vars.scss
new file mode 100644
index 0000000..6046727
--- /dev/null
+++ b/projects/lib/pagination/styles/vars.scss
@@ -0,0 +1,10 @@
+:root {
+  --wr-pagination-gap: 16px;
+  --wr-pagination-items-gap: 8px;
+  --wr-pagination-font-size: 14px;
+  --wr-pagination-total-color: var(--wr-color-medium);
+  --wr-pagination-ellipsis-color: var(--wr-color-medium);
+
+  --wr-pagination-item-size: 32px;
+  --wr-pagination-item-padding: 8px;
+}
diff --git a/projects/lib/styles.scss b/projects/lib/styles.scss
index 2bb8f30..79af693 100644
--- a/projects/lib/styles.scss
+++ b/projects/lib/styles.scss
@@ -22,4 +22,5 @@
 @forward './tag/styles';
 @forward './textarea/styles';
 @forward './select/styles';
+@forward './pagination/styles';
 //@forward './tooltip';
diff --git a/projects/showcase/app/_core/components/sidebar/sidebar.component.ts b/projects/showcase/app/_core/components/sidebar/sidebar.component.ts
index 7bcc9de..6ed401d 100644
--- a/projects/showcase/app/_core/components/sidebar/sidebar.component.ts
+++ b/projects/showcase/app/_core/components/sidebar/sidebar.component.ts
@@ -74,6 +74,7 @@ export class SidebarComponent extends WrAbstractBase implements OnInit {
         { title: 'Tag', url: [routes.docs.components.index, routes.docs.components.tag] },
         { title: 'Textarea', url: [routes.docs.components.index, routes.docs.components.textarea] },
         { title: 'Select', url: [routes.docs.components.index, routes.docs.components.select] },
+        { title: 'Pagination', url: [routes.docs.components.index, routes.docs.components.pagination] },
       ],
     },
   ];
diff --git a/projects/showcase/app/docs/components/components.routing.ts b/projects/showcase/app/docs/components/components.routing.ts
index 667e49d..f3ac515 100644
--- a/projects/showcase/app/docs/components/components.routing.ts
+++ b/projects/showcase/app/docs/components/components.routing.ts
@@ -78,4 +78,8 @@ export default [
     path: components.select,
     loadComponent: () => import('./select/select.component').then(c => c.SelectComponent),
   },
+  {
+    path: components.pagination,
+    loadComponent: () => import('./pagination/pagination.component').then(c => c.PaginationComponent),
+  },
 ] satisfies Routes;
diff --git a/projects/showcase/app/docs/components/pagination/pagination.component.html b/projects/showcase/app/docs/components/pagination/pagination.component.html
new file mode 100644
index 0000000..66d0b51
--- /dev/null
+++ b/projects/showcase/app/docs/components/pagination/pagination.component.html
@@ -0,0 +1,204 @@
+<div class="ngwr-page-info">
+  <div class="ngwr-page-info__tags">
+    <wr-tag transparent>Component</wr-tag>
+    <wr-tag transparent color="secondary">Standalone</wr-tag>
+  </div>
+  <h1 class="ngwr-page-info__title">{{ title }}</h1>
+  <p class="ngwr-page-info__description">{{ description }}</p>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">How to install</h2>
+  <p class="ngwr-page-section__description">
+    Import <code class="ngwr-pre">WrPaginationComponent</code> into a component where you want to use.
+  </p>
+  <div class="ngwr-page-section__content">
+    <ngwr-code [code]="code.import" codeLang="ts"></ngwr-code>
+    <ngwr-code [code]="code.component" codeLang="ts"></ngwr-code>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">Basic usage</h2>
+  <p class="ngwr-page-section__description">Basic usage of pagination component</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-snippet>
+      <ng-container ngProjectAs="[body]">
+        <wr-pagination [total]="total" [(current)]="current" [(pageSize)]="pageSize"></wr-pagination>
+      </ng-container>
+      <ngwr-code [code]="code.basic" codeLang="html" code></ngwr-code>
+    </ngwr-snippet>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">Position</h2>
+  <p class="ngwr-page-section__description">Different positions of pagination</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-snippet>
+      <ng-container ngProjectAs="[body]">
+        <div class="position-demo">
+          <wr-pagination [total]="total" [(current)]="current" [(pageSize)]="pageSize" position="start"></wr-pagination>
+
+          <wr-pagination
+            [total]="total"
+            [(current)]="current"
+            [(pageSize)]="pageSize"
+            position="center"
+          ></wr-pagination>
+
+          <wr-pagination [total]="total" [(current)]="current" [(pageSize)]="pageSize" position="end"></wr-pagination>
+        </div>
+      </ng-container>
+      <ngwr-code [code]="code.position" codeLang="html" code></ngwr-code>
+    </ngwr-snippet>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">With Size Changer</h2>
+  <p class="ngwr-page-section__description">Pagination with page size selection</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-snippet>
+      <ng-container ngProjectAs="[body]">
+        <wr-pagination
+          [total]="total"
+          [(current)]="current"
+          [(pageSize)]="pageSize"
+          [showSizeChanger]="true"
+        ></wr-pagination>
+      </ng-container>
+      <ngwr-code [code]="code.withSizeChanger" codeLang="html" code></ngwr-code>
+    </ngwr-snippet>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">Show Total</h2>
+  <p class="ngwr-page-section__description">Show total number of items</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-snippet>
+      <ng-container ngProjectAs="[body]">
+        <wr-pagination [total]="total" [(current)]="current" [(pageSize)]="pageSize" [showTotal]="true"></wr-pagination>
+      </ng-container>
+      <ngwr-code [code]="code.withTotal" codeLang="html" code></ngwr-code>
+    </ngwr-snippet>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">More Pages</h2>
+  <p class="ngwr-page-section__description">Pagination with more pages shows ellipsis for better navigation</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-snippet>
+      <ng-container ngProjectAs="[body]">
+        <wr-pagination
+          [total]="totalLarge"
+          [(current)]="currentLarge"
+          [(pageSize)]="pageSizeLarge"
+          [showSizeChanger]="true"
+        ></wr-pagination>
+      </ng-container>
+      <ngwr-code [code]="code.morePages" codeLang="html" code></ngwr-code>
+    </ngwr-snippet>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">Disabled</h2>
+  <p class="ngwr-page-section__description">Disabled state of pagination</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-snippet>
+      <ng-container ngProjectAs="[body]">
+        <wr-pagination [total]="total" [(current)]="current" [(pageSize)]="pageSize" [disabled]="true"></wr-pagination>
+      </ng-container>
+      <ngwr-code [code]="code.disabled" codeLang="html" code></ngwr-code>
+    </ngwr-snippet>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">Styling</h2>
+  <p class="ngwr-page-section__description">You can customize pagination styles using CSS variables.</p>
+
+  <div class="ngwr-page-section__content">
+    <ngwr-code [code]="code.styling" codeLang="scss"></ngwr-code>
+  </div>
+</div>
+
+<div class="ngwr-page-section">
+  <h2 class="ngwr-page-section__title">API</h2>
+
+  <div class="ngwr-page-section__content">
+    <div class="ngwr-page-table">
+      <table>
+        <tr class="ngwr-page-table__head">
+          <th>Property</th>
+          <th>Description</th>
+          <th>Type</th>
+          <th>Default</th>
+        </tr>
+        <tr>
+          <td><code>total</code></td>
+          <td>Total number of items</td>
+          <td><code>number</code></td>
+          <td><code>0</code></td>
+        </tr>
+        <tr>
+          <td><code>current</code></td>
+          <td>Current page number</td>
+          <td><code>number</code></td>
+          <td><code>1</code></td>
+        </tr>
+        <tr>
+          <td><code>pageSize</code></td>
+          <td>Number of items per page</td>
+          <td><code>number</code></td>
+          <td><code>10</code></td>
+        </tr>
+        <tr>
+          <td><code>position</code></td>
+          <td>Position of pagination</td>
+          <td><code>"start" | "center" | "end"</code></td>
+          <td><code>"start"</code></td>
+        </tr>
+        <tr>
+          <td><code>disabled</code></td>
+          <td>Whether pagination is disabled</td>
+          <td><code>boolean</code></td>
+          <td><code>false</code></td>
+        </tr>
+        <tr>
+          <td><code>showSizeChanger</code></td>
+          <td>Whether to show page size select</td>
+          <td><code>boolean</code></td>
+          <td><code>false</code></td>
+        </tr>
+        <tr>
+          <td><code>showTotal</code></td>
+          <td>Whether to show total number</td>
+          <td><code>boolean</code></td>
+          <td><code>false</code></td>
+        </tr>
+        <tr>
+          <td><code>ofLabel</code></td>
+          <td>Total number "of" label</td>
+          <td><code>string</code></td>
+          <td><code>"of"</code></td>
+        </tr>
+        <tr>
+          <td><code>pageSizeOptions</code></td>
+          <td>Available page sizes</td>
+          <td><code>number[]</code></td>
+          <td><code>[10, 20, 50, 100]</code></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
diff --git a/projects/showcase/app/docs/components/pagination/pagination.component.scss b/projects/showcase/app/docs/components/pagination/pagination.component.scss
new file mode 100644
index 0000000..0f550cf
--- /dev/null
+++ b/projects/showcase/app/docs/components/pagination/pagination.component.scss
@@ -0,0 +1,12 @@
+.sizes-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.position-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
diff --git a/projects/showcase/app/docs/components/pagination/pagination.component.ts b/projects/showcase/app/docs/components/pagination/pagination.component.ts
new file mode 100644
index 0000000..d484c8c
--- /dev/null
+++ b/projects/showcase/app/docs/components/pagination/pagination.component.ts
@@ -0,0 +1,112 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+import { ChangeDetectionStrategy, Component, HostBinding, inject, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { WrPaginationComponent } from 'ngwr/pagination';
+import { WrTagComponent } from 'ngwr/tag';
+
+import { CodeComponent, SnippetComponent } from '#core/components';
+import { SeoService } from '#core/services';
+
+@Component({
+  standalone: true,
+  selector: 'ngwr-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrl: './pagination.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [CodeComponent, SnippetComponent, WrPaginationComponent, WrTagComponent],
+})
+export class PaginationComponent implements OnInit {
+  @HostBinding()
+  class = 'ngwr-page';
+
+  private readonly seoService = inject(SeoService);
+
+  title = 'Pagination';
+  description = 'A long list can be divided into several pages using Pagination';
+
+  current = 1;
+  pageSize = 10;
+  total = 50;
+  currentLarge = 1;
+  pageSizeLarge = 10;
+  totalLarge = 200;
+
+  code = {
+    import: `import { WrPaginationComponent } from "ngwr/pagination";`,
+    component: `@Component({
+                  //...,
+                  imports: [WrPaginationComponent],
+                })
+                export class MyComponent {}`,
+    basic: `<wr-pagination
+              [total]="50"
+              [(current)]="current"
+              [(pageSize)]="pageSize"
+            ></wr-pagination>`,
+    position: `<wr-pagination
+                [total]="50"
+                [(current)]="current"
+                [(pageSize)]="pageSize"
+                position="start"
+              ></wr-pagination>
+
+              <wr-pagination
+                [total]="50"
+                [(current)]="current"
+                [(pageSize)]="pageSize"
+                position="center"
+              ></wr-pagination>
+
+              <wr-pagination
+                [total]="50"
+                [(current)]="current"
+                [(pageSize)]="pageSize"
+                position="end"
+              ></wr-pagination>`,
+    withSizeChanger: `<wr-pagination
+                        [total]="50"
+                        [(current)]="current"
+                        [(pageSize)]="pageSize"
+                        [showSizeChanger]="true"
+                      ></wr-pagination>`,
+    withTotal: `<wr-pagination
+                  [total]="50"
+                  [(current)]="current"
+                  [(pageSize)]="pageSize"
+                  [showTotal]="true"
+                ></wr-pagination>`,
+    morePages: `<wr-pagination
+                  [total]="200"
+                  [(current)]="current"
+                  [(pageSize)]="pageSize"
+                ></wr-pagination>`,
+    disabled: `<wr-pagination
+                  [total]="50"
+                  [(current)]="current"
+                  [(pageSize)]="pageSize"
+                  [disabled]="true"
+                ></wr-pagination>`,
+    styling: `:root {
+                --wr-pagination-gap: 16px;
+                --wr-pagination-items-gap: 8px;
+                --wr-pagination-font-size: 14px;
+                --wr-pagination-item-padding: 8px;
+                --wr-pagination-total-color: var(--wr-color-medium);
+                --wr-pagination-ellipsis-color: var(--wr-color-medium);
+              }`,
+  };
+
+  ngOnInit(): void {
+    this.seoService.setCanonicalURL();
+    this.seoService.setTitle(this.title);
+    this.seoService.setDescription(this.description);
+    this.seoService.setKeywords(['pagination', 'wr-pagination']);
+  }
+}
diff --git a/projects/showcase/app/routing.ts b/projects/showcase/app/routing.ts
index 35cdb67..374d1d9 100644
--- a/projects/showcase/app/routing.ts
+++ b/projects/showcase/app/routing.ts
@@ -27,6 +27,7 @@ export const routes = {
       tag: 'tag',
       textarea: 'textarea',
       select: 'select',
+      pagination: 'pagination',
     },
     core: {
       index: 'core',